<script setup lang='ts'>
import type {Ref} from 'vue'
import {computed, onMounted, reactive, ref, watch, defineEmits, defineProps} from 'vue'
import {useRoute} from 'vue-router'
import {storeToRefs} from 'pinia'

import {
	NAutoComplete, NGradientText, NBadge, useNotification,
	NSpin, NTooltip, NDivider, NUploadDragger, NSwitch,
	NButton, NInput, useDialog, useMessage, NDropdown, NUpload, NModal, NDrawer, NButtonGroup, NTabs, NTabPane, NSelect
} from 'naive-ui'
import Permission from './layout/Permission.vue'


import html2canvas from 'html2canvas'
import {Message} from './components'
import {useScroll} from './hooks/useScroll'
import {useChat} from './hooks/useChat'
import {useUsingContext} from './hooks/useUsingContext'
import HeaderComponent from './components/Header/index.vue'
import {HoverButton, SvgIcon} from '@/components/common'
import {useBasicLayout} from '@/hooks/useBasicLayout'
import {useChatStore, usePromptStore} from '@/store'
import {fetchChatAPIProcess} from '@/api'
import {t} from '@/locales'
import axios from "axios";
import {Icon} from '@iconify/vue'


// import {mathjax} from 'mathjax-full/js/mathjax.js';
// import {TeX} from 'mathjax-full/js/input/tex.js';
// import {SVG} from 'mathjax-full/js/output/svg.js';
// import {liteAdaptor} from 'mathjax-full/js/adaptors/liteAdaptor.js';
// import {RegisterHTMLHandler} from 'mathjax-full/js/handlers/html.js';
// import {AllPackages} from 'mathjax-full/js/input/tex/AllPackages.js';
// 创建适配器和文档处理器
// const adaptor = liteAdaptor();
// RegisterHTMLHandler(adaptor);
// 配置MathJax
// const tex = new TeX({packages: AllPackages});
// const svg = new SVG({fontCache: 'none'});
// const doc = mathjax.document('', {InputJax: tex, OutputJax: svg});

// 用于渲染数学公式的函数
// function renderMath(math: any) {
// 	return adaptor.outerHTML(doc.convert(math, {display: true}));
// }


const props = defineProps({
	uploadfilestate: {
		type: String,
		required: true
	},
	generData: {
		type: Object,
		required: true
	},
	latexData: {
		type: Object,
		required: true
	},
	onmswatch: {
		type: Object,
		required: true
	},
	onmsgstate: {
		type: Object,
		required: true
	},
})


interface FileListObject {
	name: string;
	content: string;
	length: number;
	nodisplaycontent: string;
	switchStatus: boolean;
}

const uploadRef = ref<any>()
const uploadRef1 = ref<any>()
const uploadRef2 = ref<any>()


const state = reactive({
	//智谱联网
	net_state: false,
	zhipuimg: "http://106.53.97.117:7777/static/null",
	//微调指令
	middle: "",
	new_msg: "无消息",
	//NPC 切换状体
	npcstate: true,
	//打开房间状态
	room_status: 0,
	room_id: "new",
	//好评 差评
	value1: 6768,
	value2: 19,
	//模型类选项卡的样式：
	model_show: false,
	//模型类
	model_value: "竞 赛 模 式",
	model_options: [
		{
			label: "竞 赛 模 式",
			value: '竞 赛 模 式',
			muban_list: ['呵呵']
		},
		{
			label: '训 练 模 式',
			value: '训 练 模 式'
		},
		{
			label: '视 频 模 式',
			value: '视 频 模 式'
		},
		{
			label: '教 程 模 式',
			value: '教 程 模 式'
		},
		{
			label: '文 献 翻 译',
			value: '文 献 翻 译',
		},
		{
			label: '接 口 文 档 模 式',
			value: '接 口 文 档 模 式',
		},
		{
			label: '开 发 命 名 模 式',
			value: '开 发 命 名 模 式',
		},
		{
			label: 'OPP 设 计 模 式',
			value: 'OPP 设 计 模 式',
		},
		{
			label: 'S Q L 业 务 模 式',
			value: 'S Q L 业 务 模 式',
		},
		{
			label: '代 码 解 释 模 式',
			value: '代 码 解 释 模 式',
		},
		{
			label: '社 区 模 式',
			value: '社 区 模 式',
			display: false,
		}
		,
		{
			label: '无 尽 模 式',
			value: '无 尽 模 式',
		}
	],
	//文件悬浮
	hover: null as number | null, // 用于识别当前悬浮的项
	//延时
	draution: 100000,
	//右侧抽屉
	showOuter: false,
	files: [
		// 假设的文件数据
		{
			name: '2023年数维杯AGI指导性论文A',
			imageSrc: 'https://ximixiaoyuan-1301452075.cos.ap-nanjing.myqcloud.com/static%2Fjs%2F%E6%96%87%E4%BB%B6%E5%9B%BE%E5%86%8C%E5%A4%B9%2Fdocx2.png'
		},
		{
			name: '2023年数维杯AGI指导性论文B',
			imageSrc: 'https://ximixiaoyuan-1301452075.cos.ap-nanjing.myqcloud.com/static%2Fjs%2F%E6%96%87%E4%BB%B6%E5%9B%BE%E5%86%8C%E5%A4%B9%2Fpdf2.png'
		},
		{
			name: '2023年某演讲稿PPT',
			imageSrc: 'https://ximixiaoyuan-1301452075.cos.ap-nanjing.myqcloud.com/static%2Fjs%2F%E6%96%87%E4%BB%B6%E5%9B%BE%E5%86%8C%E5%A4%B9%2Fppt_1.png'
		},
		{
			name: '2023年数维杯某天气数据xls',
			imageSrc: 'https://ximixiaoyuan-1301452075.cos.ap-nanjing.myqcloud.com/static%2Fjs%2F%E6%96%87%E4%BB%B6%E5%9B%BE%E5%86%8C%E5%A4%B9%2Fxls_1.png'
		},
		{
			name: '2023年AGI内容数据',
			imageSrc: 'https://ximixiaoyuan-1301452075.cos.ap-nanjing.myqcloud.com/static%2Fjs%2F%E6%96%87%E4%BB%B6%E5%9B%BE%E5%86%8C%E5%A4%B9%2Ftxt_1.png'
		},
		// 更多文件...
	],
	autofenxistate: false,
	changjingshowModal: ref(false),
	newbtn: "教程资源加载中...",
	newbtnloading: true,
	newbtnstate: true,
	newpicsindex: 1,
	nespic: "http://freesgpt.cn/x1.jpg",
	//新手第二次状态
	novice2: "1",
	//新手状态
	novice: true,
	//emp模式
	empmode: "竞赛模式",
	currentModeIndex: 1,
	//通用文件格式
	gernaltext: "",
	//放弃上传的一些文件 列表形式
	gner_filelist: [] as FileListObject[],
	generl_filename: "",
	generl_file: "",
	maxcontent: 0,
	question_pdf: "",
	question_xlsxs: "",
	question_data: "",
	question_fujian: "",
	disabled: false,
	pdfshitu: "",
	xlxsspinstate: false,
	pdfstate: false,
	datastate: false,
	fujianstate: false,
	xlsx1state: false,
	xlsx2state: false,
	xlsx3state: false,
	//文件列表
	xlsx1filename: "",
	xlsx2filename: "",
	xlsx3filename: "",
	pdffilename: "",
	csv1filename: "",
	fujianfilename: "",
	showModal: ref(false),
	//xstudio的新手引导
	showModal2: ref(false),
	showModal3: ref(false),
	latexadr: `http://106.53.97.117:2088/upload?filename=${localStorage.getItem("username")}.jpg`,
	latexadrs: "null",
	latexcontent: "",
	scorea: ref(45),
	scoreb: ref(0),
	banben: '2',
	//切换模式
	modelc: "0",
	options: []
})

// const needPermission = state.room_status
//上传图片识别
const openzhipuimg = () => {
	if (uploadRef.value) {
		// trigger the click event on the hidden input element
		let input = uploadRef.value.$el.querySelector('input[type="file"]');
		if (input) {
			input.click();
		}
	}
}

const openzhipuimg1 = () => {
	if (uploadRef1.value) {
		// trigger the click event on the hidden input element
		let input = uploadRef1.value.$el.querySelector('input[type="file"]');
		if (input) {
			input.click();
		}
	}
}

const openzhipuimg2 = () => {
	emit('item-upload')
	// if (uploadRef2.value) {
	// 	// trigger the click event on the hidden input element
	// 	let input = uploadRef2.value.$el.querySelector('input[type="file"]');
	// 	if (input) {
	// 		input.click();
	// 	}
	// }
}
const handleSelect = (e: any) => {
	console.log(e)
	ms.info("请稍等")
	handleSubmit("1", e, "0")

}
const emit = defineEmits(['item-selected', 'item-setting', 'item-uploadfiles', 'item-login', 'item-novice', 'item-models', 'item-xunlian', 'item-upload'])


const handleFinish1 = (e: object) => {
	let file = (e as any).file; // 使用类型断言获取'file'属性
	state.disabled = false;
	state.pdfstate = true;
	// 将存储赛题的状态修改掉
	localStorage.setItem("pdfstate", "true");
	localStorage.setItem("pdffilename", file.name);
	state.pdffilename = file.name;
//	删除掉原有的缓存
	localStorage.setItem("pdfcontent", "null")
	axios.get(`http://106.53.97.117:2088/seepdf?filename=${localStorage.getItem("username")}`).then(res => {
		// 将存储赛题的状态修改掉
		localStorage.setItem("pdfstate", "true");
		state.pdffilename = file.name
		localStorage.setItem("pdffilename", file.name)
		localStorage.setItem("pdfcontent", res.data.data)

	})
	// 子传父 文件上传
	emit('item-uploadfiles', [
		state.pdffilename,
		state.xlsx1filename,
		state.xlsx2filename,
		state.xlsx3filename,
		state.csv1filename,
		state.fujianfilename,
	])
}
//产出文件的点击
const handleClick = (fileName: any) => {
	console.log('File clicked:', fileName);
	// 这里可以添加你想执行的函数逻辑
}

const handleFinish2 = (e: object) => {
	let file = (e as any).file; // 使用类型断言获取'file'属性
	state.disabled = false;
	state.datastate = true;
	// 将存储赛题的状态修改掉
	localStorage.setItem("datastate", "true");
	localStorage.setItem("csv1filename", file.name);
	state.csv1filename = file.name;
//	删除掉原有的缓存
	localStorage.setItem("csv1content", "无数据")
	state.xlxsspinstate = true
	axios.get(`http://106.53.97.117:2088/seecsv?filename=${localStorage.getItem("username")}`).then(res => {
		state.xlxsspinstate = false
		ms.success("数据识别成功")
		//请求插槽1接口数据
		// 将存储赛题的状态修改掉
		state.xlxsspinstate = false
		localStorage.setItem("datastate", "true");
		state.xlsx1filename = file.name
		localStorage.setItem("csv1filename", file.name)
		localStorage.setItem("csv1content", res.data.data)
	})
	// 子传父 文件上传
	emit('item-uploadfiles', [
		state.pdffilename,
		state.xlsx1filename,
		state.xlsx2filename,
		state.xlsx3filename,
		state.csv1filename,
		state.fujianfilename,
	])
}
const handleFinish3 = (e: object) => {
	let file = (e as any).file; // 使用类型断言获取'file'属性
	state.disabled = false;
	state.fujianstate = true;
	// 将存储赛题的状态修改掉
	localStorage.setItem("fujianstate", "true");

	localStorage.setItem("fujianfilename", file.name);
//	删除掉原有的缓存
	localStorage.removeItem("fujiancontent")
	axios.get(`http://106.53.97.117:2088/seepdf?filename=${localStorage.getItem("username")}`).then(res => {
		// 将存储赛题的状态修改掉
		localStorage.setItem("fujianstate", "true");
		state.fujianfilename = file.name
		localStorage.setItem("fujianfilename", file.name)
		localStorage.setItem("fujiancontent", res.data.data)
	})
	// 子传父 文件上传
	emit('item-uploadfiles', [
		state.pdffilename,
		state.xlsx1filename,
		state.xlsx2filename,
		state.xlsx3filename,
		state.csv1filename,
		file.name,
	])
}
//卡槽一
const xlsxs1Finish = (e: object) => {
	let file = (e as any).file; // 使用类型断言获取'file'属性
	localStorage.setItem("xlxs1name", "无")
	state.disabled = false;
	state.xlsx1state = true;
//	对数据内容进行识别并缓存掉
	state.xlxsspinstate = true
	//清空插槽1数据
	localStorage.setItem("xlxs1content", "无数据")
	axios.get(`http://106.53.97.117:2088/seexlsx?filename=${localStorage.getItem("username")}`).then(res => {
		state.xlxsspinstate = false
		ms.success("数据识别成功")
		//请求插槽1接口数据
		// 将存储赛题的状态修改掉
		localStorage.setItem("xlsx1state", "true");
		state.xlsx1filename = file.name
		localStorage.setItem("xlxs1name", file.name)
		localStorage.setItem("xlxs1content", res.data.data)
	})
	// 子传父 文件上传
	emit('item-uploadfiles', [
		state.pdffilename,
		file.name,
		state.xlsx2filename,
		state.xlsx3filename,
		state.csv1filename,
		state.fujianfilename,
	])
}
//卡槽二
const xlsxs2Finish = (e: object) => {
	let file = (e as any).file; // 使用类型断言获取'file'属性
	localStorage.setItem("xlxs2name", "无")
	state.disabled = false;
	state.xlsx2state = true;
//	对数据内容进行识别并缓存掉
	state.xlxsspinstate = true
	//清空插槽1数据
	localStorage.setItem("xlxs2content", "无数据")
	axios.get(`http://106.53.97.117:2088/seexlsx?filename=${localStorage.getItem("username")}`).then(res => {
		state.xlxsspinstate = false
		ms.success("数据识别成功")
		//请求插槽1接口数据
		// 将存储赛题的状态修改掉
		localStorage.setItem("xlsx2state", "true");
		state.xlsx2filename = file.name
		localStorage.setItem("xlxs2name", file.name)
		localStorage.setItem("xlxs2content", res.data.data)
	})
	// 子传父 文件上传
	emit('item-uploadfiles', [
		state.pdffilename,
		state.xlsx1filename,
		file.name,
		state.xlsx3filename,
		state.csv1filename,
		state.fujianfilename,
	])
}
//卡槽三
const xlsxs3Finish = (e: object) => {
	let file = (e as any).file; // 使用类型断言获取'file'属性
	localStorage.setItem("xlxs3name", "无")
	state.disabled = false;
	state.xlsx3state = true;
//	对数据内容进行识别并缓存掉
	state.xlxsspinstate = true
	//清空插槽1数据
	localStorage.setItem("xlxs3content", "无数据")
	axios.get(`http://106.53.97.117:2088/seexlsx?filename=${localStorage.getItem("username")}`).then(res => {
		state.xlxsspinstate = false
		ms.success("数据识别成功")
		//请求插槽1接口数据
		// 将存储赛题的状态修改掉
		localStorage.setItem("xlsx3state", "true");
		state.xlsx3filename = file.name
		localStorage.setItem("xlxs3name", file.name)
		localStorage.setItem("xlxs3content", res.data.data)
	})
	// 子传父 文件上传
	emit('item-uploadfiles', [
		state.pdffilename,
		state.xlsx1filename,
		state.xlsx2filename,
		file.name,
		state.csv1filename,
		state.fujianfilename,
	])
}
//通用文件上传函数

const handlechangegenerlfile = (e: any) => {
	state.generl_filename = localStorage.getItem("username") + e.file.name.split('.')[0]
	state.generl_file = `http://106.53.97.117:2088/uploads?filename=` + state.generl_filename
}

//展示显示的上传结果： 展示当前上传了哪些文件
const finishgegenerlfile = (e: any) => {
	ms.success("文件上传成功")
	axios.post(`http://106.53.97.117:2088/parse`, {
		file_path: state.generl_filename + "." + e.file.name.split('.').pop()
	}).then(res => {
		state.gner_filelist.push({
			"name": e.file.name,
			"content": res.data.text_content,
			"length": res.data.text_content.length,
			"nodisplaycontent": res.data.text_content,
			"switchStatus": true
		})
		console.log(res.data.metadata)
		state.maxcontent = 0;
		state.gernaltext = "";
		for (let i = 0; i < state.gner_filelist.length; i++) {
			state.maxcontent += state.gner_filelist[i].content.length;
			state.gernaltext += state.gner_filelist[i].content
		}
		localStorage.setItem("genertext", JSON.stringify(state.gner_filelist))
		localStorage.setItem("genertexts", JSON.stringify(state.gernaltext))
		localStorage.setItem("maxcontent", JSON.stringify(state.maxcontent))
	})
}

const handlechange1 = () => {
	state.question_pdf = `http://106.53.97.117:2088/upload?filename=` + localStorage.getItem("username") + ".pdf"
}
const handlechange2 = () => {
	state.question_data = `http://106.53.97.117:2088/upload?filename=` + localStorage.getItem("username") + ".csv"
}
const xlsxschange = () => {
	state.question_xlsxs = `http://106.53.97.117:2088/upload?filename=` + localStorage.getItem("username") + ".xlsx"
}
const handlechange3 = () => {
	state.question_fujian = `http://106.53.97.117:2088/upload?filename=` + localStorage.getItem("username") + ".pdf"
}
//上传前提示
const beforeUpload = (data: any) => {
	const file = data.file.file;
	if (file.size > 51200000000) { // 检查文件大小是否超过50KB
		ms.error('文件大小不能超过5MB，请重新上传');
		return false; // 返回false以取消上传
	}
	return true; // 返回true继续上传
}
const onPositiveClick = () => {
	ms.success("好的！你可以尽情发挥你的能力，和xstudio一起，提高自己吧！")
}
let controller = new AbortController()
const openLongReply = import.meta.env.VITE_GLOB_OPEN_LONG_REPLY === 'true'
const route = useRoute()
const dialog = useDialog()
const ms = useMessage()
const chatStore = useChatStore()
const {isMobile} = useBasicLayout()
const {addChat, updateChat, updateChatSome, getChatByUuidAndIndex} = useChat()
const {scrollRef, scrollToBottom, scrollToBottomIfAtBottom} = useScroll()
const {usingContext, toggleUsingContext} = useUsingContext()
const {uuid} = route.params as { uuid: string }
const dataSources = computed(() => chatStore.getChatByUuid(+uuid))
const conversationList = computed(() => dataSources.value.filter(item => (!item.inversion && !!item.conversationOptions)))
const prompt = ref<string>('')
const loading = ref<boolean>(false)
const inputRef = ref<Ref | null>(null)
const icons = ['ri-bilibili-line', 'ri-file-paper-2-line', 'ri-funds-box-line', 'ri-user-2-fill'];
const currentIcon = computed(() => icons[state.currentModeIndex % 4]);
//模式选择
const modein = () => {
	//加载模型选择数据
	axios.get("http://106.53.97.117:2088/items").then(res => {
		state.options = res.data
	})
}
// 添加PromptStore
const promptStore = usePromptStore()
// 使用storeToRefs，保证store修改后，联想部分能够重新渲染
const {promptList: promptTemplate} = storeToRefs<any>(promptStore)
// 未知原因刷新页面，loading 状态不会重置，手动重置
dataSources.value.forEach((item, index) => {
	if (item.loading)
		updateChatSome(+uuid, index, {loading: false})
})


//我希望这个事件触发组件 sider里面并在sider里输出”1“
async function handleSubmit(e: string, a: string, c: string) {
	if (localStorage.getItem("username")) {
		if (state.banben == '1') {
			//对话机制
			if (state.scorea <= 0) {
				dialog.error({
					title: '余额不足，请续费！',
					content: '进入freesgpt.cn官网进行续费',
					positiveText: '好嘞',
				})
			} else {
				//每次请求都会进行加分 请求一次3分
				state.scorea = parseInt(<string>localStorage.getItem("梦想版")) - 1
				localStorage.setItem("梦想版", String(state.scorea));
				onConversation(e, a, c)
			}
		} else {
			//对话机制
			if (state.scoreb <= 0) {
				dialog.error({
					title: '余额不足，请续费！',
					content: '进入freesgpt.cn官网进行续费',
					positiveText: '好嘞',
				})
			} else {
				if (props.generData[2] > 9000) {
					dialog.error({
						title: '超出字数限制！',
						content: '字数限制超出 请减少上传量，避免过分消耗',
						positiveText: '好嘞',
					})
				} else {
					//每次请求都会进行加分 请求一次3分
					state.scoreb = parseInt(<string>localStorage.getItem("精灵版")) - 1
					localStorage.setItem("精灵版", String(state.scoreb));
					onConversation(e, a, c)
				}
			}
		}
	} else {
		//这种情况是新手用户的情况，允许用户第一次发送信息，由xstudio专门话术回答，并开始进入引导模式 未登录状态初始值设置为45次
		state.scorea -= 1;
		localStorage.setItem("梦想版", String(state.scorea));
		await onConversation(String(0), String(1), String(state.novice2))
		emit('item-selected', [state.scorea, state.scoreb])
		console.log("好了，现在展开教程")
		if (state.novice2 == "1") {
			state.showModal2 = true;
			setTimeout(() => {
				state.newbtn = "下一步 1/30";
				state.newbtnloading = false;
				state.newbtnstate = false;
			}, 1000)
		}
		state.novice2 = "2";
	}
}


//监听
watch(() => state.scorea, (a, b) => {
	if (state.banben == '1') {
		if (b - a == 1) {
			axios.post(`http://106.53.97.117:2088/ups`, {
				sql: `update admin set scorea=scorea-1 where name='${localStorage.getItem("username")}'`
			}).then(res => {
				// 减-1次数子传父
				emit('item-selected', [state.scorea, state.scoreb])
			})
		} else if (b - a == 10) {
			axios.post(`http://106.53.97.117:2088/ups`, {
				sql: `update admin set scorea=scorea-10 where name='${localStorage.getItem("username")}'`
			}).then(res => {
				// 减-1次数子传父
				emit('item-selected', [state.scorea, state.scoreb])
			})
		}
	} else if (state.banben == '2') {
		if (b - a == 1) {
			axios.post(`http://106.53.97.117:2088/ups`, {
				sql: `update admin set scoreb=scoreb-1 where name='${localStorage.getItem("username")}'`
			}).then(() => {
				emit('item-selected', [state.scorea, state.scoreb])
			})
		}
	}
});
//监听 props
watch(() => props.uploadfilestate, () => {
	state.showModal = true;
});

//监听 数据的情况 0~6
watch(() => props.onmsgstate, (e) => {
		// 0~5  进行一个对内核的数据纳入
		console.log("-------------")
	},
	{deep: true}  // 这个选项开启深度监听
);
//监听b
watch(() => state.scoreb, (a, b) => {
	if (state.banben == '1') {
		if (b - a == 1) {
			axios.post(`http://106.53.97.117:2088/ups`, {
				sql: `update admin set scorea=scorea-1 where name='${localStorage.getItem("username")}'`
			}).then(() => {
				console.log("--------------")
			})
		}
	} else if (state.banben == '2') {
		if (b - a == 1) {
			axios.post(`http://106.53.97.117:2088/ups`, {
				sql: `update admin set scoreb=scoreb-1 where name='${localStorage.getItem("username")}'`
			}).then(() => {
				emit('item-selected', [state.scorea, state.scoreb])
			})
		}
	}
});

//清空文件
const delgenerl = () => {
	state.gner_filelist = [];
	state.maxcontent = 0;
	state.latexcontent = "";
	ms.success("已清空");
	localStorage.removeItem("genertext")
	state.gernaltext = "";
	localStorage.removeItem("genertexts")
	localStorage.removeItem("maxcontent")
	localStorage.removeItem("zhipuimg")
}
//隐藏更新
const disupgrade = () => {
	localStorage.setItem("upgradestatus", "false")
}

// g4model微调体
const weitiaog4 = () => {
	let npc = ""

	if (state.npcstate) {
		npc = "微调指令: role:You are someone who enjoys using formulas, mathematics, and analysis to address customer problems.}"
	} else {
		npc = "微调指令: role:You are someone who enjoys using formulas, mathematics, and analysis to address customer problems.}"
	}
	state.middle = `微调指令:${npc}`
	if (localStorage.getItem("zhipuimg")) {
		console.log("存在图片数据")
		state.middle += "\n\n附件图片数据：" + localStorage.getItem("zhipuimg")
	}
	if (localStorage.getItem("genertexts")) {
		state.middle += "\n\n赛题文献数据：" + localStorage.getItem("genertexts")
	}
	if (props.latexData[0]) {
		state.middle += "\n\nlatex公式数据：" + props.latexData[0]
		console.log('----------------')
	}
	if (state.latexcontent) {
		state.middle += "\n\nlatex公式数据：" + state.latexcontent
		console.log('----------------', state.latexcontent)
	}
	if (localStorage.getItem("zhipulianwang")) {
		state.middle += localStorage.getItem("zhipulianwang")
	}
}

//G4单独体 传入 问话内容
const g4model = async (message: any) => {
	if (dataSources.value.length - Number(localStorage.getItem("xulie")) > 0) {
		state.npcstate = !state.npcstate;
	}
	weitiaog4()
	if (localStorage.getItem("history_state")) {
		message = state.middle + message
	}
	loading.value = true
	let options: Chat.ConversationRequest = {}
	const lastContext = conversationList.value[conversationList.value.length - 1]?.conversationOptions
	if (lastContext && usingContext.value)
		options = {...lastContext}
	addChat(
		+uuid,
		{
			dateTime: new Date().toLocaleString(),
			latex_src: "null",
			text_src: "http://106.53.97.117:7777/static/null",
			text: '',
			loading: true,
			inversion: false,
			error: false,
			conversationOptions: null,
			requestOptions: {prompt: message, options: {...options}},
		},
	)
	try {
		let lastText = ''
		const fetchChatAPIOnce = async () => {
			await fetchChatAPIProcess<Chat.ConversationResponse>({
				prompt: message,
				options,
				signal: controller.signal,
				onDownloadProgress: ({event}) => {
					const xhr = event.target
					const {responseText} = xhr
					// Always process the final line
					const lastIndex = responseText.lastIndexOf('\n', responseText.length - 2)
					let chunk = responseText
					if (lastIndex !== -1)
						chunk = responseText.substring(lastIndex)
					try {
						const data = JSON.parse(chunk)
						updateChat(
							+uuid,
							dataSources.value.length - 1,
							{
								dateTime: new Date().toLocaleString(),
								latex_src: "null",
								text_src: "http://106.53.97.117:7777/static/null",
								text: lastText + (data.text ?? ''),
								inversion: false,
								error: false,
								loading: true,
								conversationOptions: {conversationId: data.conversationId, parentMessageId: data.id},
								requestOptions: {prompt: message, options: {...options}},
							},
						)
						if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
							options.parentMessageId = data.id
							lastText = data.text
							message = ''
							return fetchChatAPIOnce()
						}
						scrollToBottomIfAtBottom()
					} catch (error) {
						//
					}
				},
			})
			updateChatSome(+uuid, dataSources.value.length - 1, {loading: false})
		}
		await fetchChatAPIOnce()
	} catch (error: any) {
		const errorMessage = error?.message ?? t('common.wrong')
		if (error.message === 'canceled') {
			updateChatSome(
				+uuid,
				dataSources.value.length - 1,
				{
					loading: false,
				},
			)
			scrollToBottomIfAtBottom()
			return
		}
		const currentChat = getChatByUuidAndIndex(+uuid, dataSources.value.length - 1)
		if (currentChat?.text && currentChat.text !== '') {
			updateChatSome(
				+uuid,
				dataSources.value.length - 1,
				{
					text: `${currentChat.text}\n[${errorMessage}]`,
					error: false,
					loading: false,
				},
			)
			return
		}
		updateChat(
			+uuid,
			dataSources.value.length - 1,
			{
				dateTime: new Date().toLocaleString(),
				latex_src: "null",
				text_src: "http://106.53.97.117:7777/static/null",
				text: errorMessage,
				inversion: false,
				error: true,
				loading: false,
				conversationOptions: null,
				requestOptions: {prompt: message, options: {...options}},
			},
		)
		scrollToBottomIfAtBottom()
	} finally {
		loading.value = false
		//禁止 g4model数据纳入循环
		// let get_orther_stuct = {
		// 	"name": "Maxstudio",
		// 	"room_id": 1001,
		// 	"msg_type": 1,
		// 	"msg": dataSources.value[dataSources.value.length - 1].text
		// }
		// axios.get(`http://106.53.97.117:7777/v1/insert-msg?room_id=${get_orther_stuct.room_id}&msg=${get_orther_stuct.msg}&msg_type=${get_orther_stuct.msg_type}&name=${get_orther_stuct.name}`).then(res => {
		// 	console.log(res.data)
		// 	//	查到有结果  则进行 更新失活  然后写入对方结果
		// 	if (res.data) {
		// 		//单独对话模式 这里实现和文件状态互动
		// 		scrollToBottom()
		// 	}
		// })
	}
}

// zhipu联网
const zhipulianwang = async () => {
	state.net_state = !state.net_state;
	if (state.net_state) {
		ms.success('联网已启动', {duration: 5000}) // 设置duration为0，让它一直存在直到手动清除
	} else {
		ms.info('联网已取消', {duration: 5000}) // 设置duration为0，让它一直存在直到手动清除
	}
}

//对话函数  对函数体进行单独的封装   封装函数体  对话  查询不同的参数
async function onConversation(e: string, a: string, c: string) {
	//先判断是否智普联网
	if (state.net_state && prompt.value) {
		let message = prompt.value
		controller = new AbortController()
		addChat(
			+uuid,
			{
				dateTime: new Date().toLocaleString(),
				latex_src: "null",
				text_src: "http://106.53.97.117:7777/static/null",
				text: message,
				inversion: true,
				error: false,
				conversationOptions: null,
				requestOptions: {prompt: localStorage.getItem("username") || "", options: null},
			},
		)
		scrollToBottom()
		prompt.value = ""
		loading.value = true;
		console.log("联网 功能开始")
		ms.info('正在搜集...请稍后...', {duration: 6000}) // 设置duration为0，让它一直存在直到手动清除
		axios.post('http://106.53.97.117:7777/v1/ai-import', {
			"zhipucontent": message
		})
			.then(response => {
				// 查到有结果，则进行更新失活，然后写入对方结果
				if (response.data) {
					prompt.value = ""
					addChat(
						+uuid,
						{
							dateTime: new Date().toLocaleString(),
							text_src: "http://106.53.97.117:7777/static/null",
							latex_src: "null",
							text: `${response.data.result.content}`,
							loading: false,
							inversion: false,
							error: false,
							conversationOptions: null,
							requestOptions: {prompt: `${response.data.result.content}`, options: null},
						},
					)
					loading.value = false;
					scrollToBottom()
					localStorage.setItem("zhipulianwang", "\n\n提供部分联网信息：" + response.data.result.content)

				}
			})
			.catch(error => {
				console.error("Error during POST request:", error);
			});
	} else {
		//e==0 【 e:基础模式包括对话和模板  a表示对话要求的话术  c=1 表示通信
		if (e != '1' && c == '1' && localStorage.getItem("room_id")) {
			localStorage.setItem("xulie", JSON.stringify(dataSources.value.length))
			let message = prompt.value
			if (loading.value)
				return
			if (!message || message.trim() === '')
				return
			controller = new AbortController()
			addChat(
				+uuid,
				{
					dateTime: new Date().toLocaleString(),
					latex_src: "null",
					text_src: "http://106.53.97.117:7777/static/null",
					text: message,
					inversion: true,
					error: false,
					conversationOptions: null,
					requestOptions: {prompt: localStorage.getItem("username") || "", options: null},
				},
			)
			scrollToBottom()
			//存储会话  包括所有信息
			weitiaog4()
			if (localStorage.getItem("history_state")) {
				message = prompt.value + state.middle
			}
			let get_orther_stuct = {
				"name": localStorage.getItem("username"),
				"room_id": 1001,
				"msg_type": 1,
				"msg": prompt.value,  // 假设prompt是一个包含用户输入信息的对象
				"weitiao": message // 假设prompt是一个包含用户输入信息的对象
			};
			console.log(get_orther_stuct, "会话存储中")
			axios.post('http://106.53.97.117:7777/v1/insert-msg', get_orther_stuct)
				.then(res => {
					// 查到有结果，则进行更新失活，然后写入对方结果
					if (res.data) {
						scrollToBottom(); // 假设scrollToBottom函数存在，用以将滚动条移动到底部
					}
				})
				.catch(error => {
					console.error("Error during POST request:", error);
				});

			prompt.value = ''

			//	执行G4对话  执行之前 先监听消息发送完毕再执行
			console.log(state.new_msg, "当前消息状态")
			if (state.new_msg === "消息已刷新") {
				g4model(message)
			} else if (state.new_msg == "消息启动") {
				g4model(message)
			}
		} else if (e != '1' && c != '8') {
			let message = prompt.value
			if (loading.value)
				return
			if (!message || message.trim() === '') {
				if (state.latexcontent) {
					message = "请求中..."
				}
			} else {
				console.log("111")
			}
			if (!message || message.trim() === '')
				return
			controller = new AbortController()
			addChat(
				+uuid,
				{
					dateTime: new Date().toLocaleString(),
					text: message,
					inversion: true,
					error: false,
					latex_src: "null",
					text_src: "http://106.53.97.117:7777/static/null",
					conversationOptions: null,
					requestOptions: {prompt: message, options: null},
				},
			)
			let get_orther_stuct = {
				"name": localStorage.getItem("username"),
				"room_id": 1002,
				"msg_type": 1,
				"weitiao": "",
				"msg": prompt.value // 假设prompt是一个包含用户输入信息的对象
			};
// 使用axios.post方法进行POST请求
			axios.post('http://106.53.97.117:7777/v1/insert-msg', get_orther_stuct)
				.then(res => {
					// 查到有结果，则进行更新失活，然后写入对方结果
					if (res.data) {
						scrollToBottom(); // 假设scrollToBottom函数存在，用以将滚动条移动到底部
					}
				})
				.catch(error => {
					console.error("Error during POST request:", error);
				});
			prompt.value = ''
			loading.value = true
			let options: Chat.ConversationRequest = {}
			const lastContext = conversationList.value[conversationList.value.length - 1]?.conversationOptions
			if (lastContext && usingContext.value)
				options = {...lastContext}
			addChat(
				+uuid,
				{
					dateTime: new Date().toLocaleString(),
					text: '',
					loading: true,
					inversion: false,
					latex_src: "null",
					text_src: "http://106.53.97.117:7777/static/null",
					error: false,
					conversationOptions: null,
					requestOptions: {prompt: message, options: {...options}},
				},
			)
			scrollToBottom()
			//启动对话函数
			fetchdailog(message, options);
		} else if (e == '1' && c != '8') {
			let message = prompt.value
			if (loading.value)
				return
			message = "请求中..."
			if (!message || message.trim() === '')
				return
			controller = new AbortController()
			addChat(
				+uuid,
				{
					dateTime: new Date().toLocaleString(),
					text: message,
					inversion: true,
					error: false,
					latex_src: "null",
					text_src: "http://106.53.97.117:7777/static/null",
					conversationOptions: null,
					requestOptions: {prompt: message, options: null},
				},
			)
			let get_orther_stuct = {
				"name": localStorage.getItem("username"),
				"room_id": 1002,
				"msg_type": 1,
				"weitiao": "",
				"msg": prompt.value // 假设prompt是一个包含用户输入信息的对象
			};
// 使用axios.post方法进行POST请求
			axios.post('http://106.53.97.117:7777/v1/insert-msg', get_orther_stuct)
				.then(res => {
					// 查到有结果，则进行更新失活，然后写入对方结果
					if (res.data) {
						scrollToBottom(); // 假设scrollToBottom函数存在，用以将滚动条移动到底部
					}
				})
				.catch(error => {
					console.error("Error during POST request:", error);
				});
			prompt.value = ''
			loading.value = true
			let options: Chat.ConversationRequest = {}
			const lastContext = conversationList.value[conversationList.value.length - 1]?.conversationOptions
			if (lastContext && usingContext.value)
				options = {...lastContext}
			addChat(
				+uuid,
				{
					dateTime: new Date().toLocaleString(),
					text: '',
					loading: true,
					inversion: false,
					latex_src: "null",
					text_src: "http://106.53.97.117:7777/static/null",
					error: false,
					conversationOptions: null,
					requestOptions: {prompt: message, options: {...options}},
				},
			)
			scrollToBottom()
			weitiaog4()
			fetchdailog(state.middle + a, options);
		} else if (e != '1' && c == '8') {
			let message = prompt.value
			if (loading.value)
				return
			message = "请求中..."
			if (!message || message.trim() === '')
				return
			controller = new AbortController()
			addChat(
				+uuid,
				{
					dateTime: new Date().toLocaleString(),
					text: message,
					inversion: true,
					error: false,
					latex_src: state.latexadr,
					text_src: "http://106.53.97.117:7777/static/null",
					conversationOptions: null,
					requestOptions: {prompt: message, options: null},
				},
			)
			let get_orther_stuct = {
				"name": localStorage.getItem("username"),
				"room_id": 1002,
				"msg_type": 1,
				"weitiao": "",
				"msg": prompt.value // 假设prompt是一个包含用户输入信息的对象
			};
// 使用axios.post方法进行POST请求
			axios.post('http://106.53.97.117:7777/v1/insert-msg', get_orther_stuct)
				.then(res => {
					// 查到有结果，则进行更新失活，然后写入对方结果
					if (res.data) {
						scrollToBottom(); // 假设scrollToBottom函数存在，用以将滚动条移动到底部
					}
				})
				.catch(error => {
					console.error("Error during POST request:", error);
				});
			prompt.value = ''
			loading.value = true
			let options: Chat.ConversationRequest = {}
			const lastContext = conversationList.value[conversationList.value.length - 1]?.conversationOptions
			if (lastContext && usingContext.value)
				options = {...lastContext}
			addChat(
				+uuid,
				{
					dateTime: new Date().toLocaleString(),
					text: '',
					loading: true,
					inversion: false,
					latex_src: state.latexadr,
					text_src: "http://106.53.97.117:7777/static/null",
					error: false,
					conversationOptions: null,
					requestOptions: {prompt: message, options: {...options}},
				},
			)
			scrollToBottom()
			weitiaog4()
			fetchdailog1(state.latexcontent, options);
		} else {
			let get_orther_stuct = {
				"name": localStorage.getItem("username"),
				"room_id": 1002,
				"msg_type": 1,
				"weitiao": "",
				"msg": state.latexcontent // 假设prompt是一个包含用户输入信息的对象
			};
// 使用axios.post方法进行POST请求
			axios.post('http://106.53.97.117:7777/v1/insert-msg', get_orther_stuct)
				.then(res => {
					// 查到有结果，则进行更新失活，然后写入对方结果
					if (res.data) {
						scrollToBottom(); // 假设scrollToBottom函数存在，用以将滚动条移动到底部
					}
				})
				.catch(error => {
					console.error("Error during POST request:", error);
				});
			prompt.value = ''
			loading.value = true
			let options: Chat.ConversationRequest = {}
			const lastContext = conversationList.value[conversationList.value.length - 1]?.conversationOptions
			if (lastContext && usingContext.value)
				options = {...lastContext}
			addChat(
				+uuid,
				{
					dateTime: new Date().toLocaleString(),
					text: '',
					loading: true,
					inversion: false,
					latex_src: "null",
					text_src: "http://106.53.97.117:7777/static/null",
					error: false,
					conversationOptions: null,
					requestOptions: {prompt: state.latexcontent, options: {...options}},
				},
			)
			scrollToBottom()
			weitiaog4()
			fetchdailog(state.middle + a, options);
		}
	}
}


//chat对话 函数封装

//启动对话函数
const fetchdailog = async (message: any, options: any) => {
	try {
		let lastText = ''
		const fetchChatAPIOnce = async () => {
			weitiaog4();
			console.log(localStorage.getItem("history_state"), "状态")
			// if (localStorage.getItem("history_state")) {
			message = state.middle + message
			// console.log(message)
			// }
			await fetchChatAPIProcess<Chat.ConversationResponse>({
				prompt: message,
				options,
				signal: controller.signal,
				onDownloadProgress: ({event}) => {
					const xhr = event.target
					const {responseText} = xhr
					// Always process the final line
					const lastIndex = responseText.lastIndexOf('\n', responseText.length - 2)
					let chunk = responseText
					if (lastIndex !== -1)
						chunk = responseText.substring(lastIndex)
					try {
						const data = JSON.parse(chunk)
						updateChat(
							+uuid,
							dataSources.value.length - 1,
							{
								dateTime: new Date().toLocaleString(),
								latex_src: "null",
								text_src: "http://106.53.97.117:7777/static/null",
								text: lastText + (data.text ?? ''),
								inversion: false,
								error: false,
								loading: true,
								conversationOptions: {conversationId: data.conversationId, parentMessageId: data.id},
								requestOptions: {prompt: message, options: {...options}},
							},
						)
						if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
							options.parentMessageId = data.id
							lastText = data.text
							message = ''
							return fetchChatAPIOnce()
						}
						scrollToBottomIfAtBottom()
					} catch (error) {
						//
					}
				},
			})
			updateChatSome(+uuid, dataSources.value.length - 1, {loading: false})
		}
		await fetchChatAPIOnce()
	} catch (error: any) {
		const errorMessage = error?.message ?? t('common.wrong')
		if (error.message === 'canceled') {
			updateChatSome(
				+uuid,
				dataSources.value.length - 1,
				{
					loading: false,
				},
			)
			scrollToBottomIfAtBottom()
			return
		}
		const currentChat = getChatByUuidAndIndex(+uuid, dataSources.value.length - 1)
		if (currentChat?.text && currentChat.text !== '') {
			updateChatSome(
				+uuid,
				dataSources.value.length - 1,
				{
					text: `${currentChat.text}\n[${errorMessage}]`,
					error: false,
					loading: false,
				},
			)
			return
		}
		updateChat(+uuid,
			dataSources.value.length - 1,
			{
				dateTime: new Date().toLocaleString(),
				latex_src: "null",
				text_src: "http://106.53.97.117:7777/static/null",
				text: errorMessage,
				inversion: false,
				error: true,
				loading: false,
				conversationOptions: null,
				requestOptions: {prompt: message, options: {...options}},
			},
		)
		scrollToBottomIfAtBottom()
	} finally {
		loading.value = false
	}
}


const fetchdailog1 = async (message: any, options: any) => {
	try {
		let lastText = ''
		const fetchChatAPIOnce = async () => {
			weitiaog4();
			console.log(localStorage.getItem("history_state"), "状态")
			// if (localStorage.getItem("history_state")) {
			message = state.middle + message
			// console.log(message)
			// }
			await fetchChatAPIProcess<Chat.ConversationResponse>({
				prompt: message,
				options,
				signal: controller.signal,
				onDownloadProgress: ({event}) => {
					const xhr = event.target
					const {responseText} = xhr
					// Always process the final line
					const lastIndex = responseText.lastIndexOf('\n', responseText.length - 2)
					let chunk = responseText
					if (lastIndex !== -1)
						chunk = responseText.substring(lastIndex)
					try {
						const data = JSON.parse(chunk)
						updateChat(
							+uuid,
							dataSources.value.length - 1,
							{
								dateTime: new Date().toLocaleString(),
								latex_src: state.latexadr,
								text_src: "http://106.53.97.117:7777/static/null",
								text: lastText + (data.text ?? ''),
								inversion: false,
								error: false,
								loading: true,
								conversationOptions: {conversationId: data.conversationId, parentMessageId: data.id},
								requestOptions: {prompt: message, options: {...options}},
							},
						)
						if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
							options.parentMessageId = data.id
							lastText = data.text
							message = ''
							return fetchChatAPIOnce()
						}
						scrollToBottomIfAtBottom()
					} catch (error) {
						//
					}
				},
			})
			updateChatSome(+uuid, dataSources.value.length - 1, {loading: false})
		}
		await fetchChatAPIOnce()
	} catch (error: any) {
		const errorMessage = error?.message ?? t('common.wrong')
		if (error.message === 'canceled') {
			updateChatSome(
				+uuid,
				dataSources.value.length - 1,
				{
					loading: false,
				},
			)
			scrollToBottomIfAtBottom()
			return
		}
		const currentChat = getChatByUuidAndIndex(+uuid, dataSources.value.length - 1)
		if (currentChat?.text && currentChat.text !== '') {
			updateChatSome(
				+uuid,
				dataSources.value.length - 1,
				{
					text: `${currentChat.text}\n[${errorMessage}]`,
					error: false,
					loading: false,
				},
			)
			return
		}
		updateChat(+uuid,
			dataSources.value.length - 1,
			{
				dateTime: new Date().toLocaleString(),
				latex_src: state.latexadr,
				text_src: "http://106.53.97.117:7777/static/null",
				text: errorMessage,
				inversion: false,
				error: true,
				loading: false,
				conversationOptions: null,
				requestOptions: {prompt: message, options: {...options}},
			},
		)
		scrollToBottomIfAtBottom()
	} finally {
		loading.value = false
	}
}

async function onRegenerate(index: number) {
	if (loading.value)
		return
	controller = new AbortController()

	const {requestOptions} = dataSources.value[index]

	let message = requestOptions?.prompt ?? ''

	let options: Chat.ConversationRequest = {}

	if (requestOptions.options)
		options = {...requestOptions.options}

	loading.value = true

	updateChat(
		+uuid,
		index,
		{
			dateTime: new Date().toLocaleString(),
			latex_src: "null",
			text_src: "http://106.53.97.117:7777/static/null",
			text: '',
			inversion: false,
			error: false,
			loading: true,
			conversationOptions: null,
			requestOptions: {prompt: message, options: {...options}},
		},
	)

	try {
		let lastText = ''
		const fetchChatAPIOnce = async () => {
			await fetchChatAPIProcess<Chat.ConversationResponse>({
				prompt: message,
				options,
				signal: controller.signal,
				onDownloadProgress: ({event}) => {
					const xhr = event.target
					const {responseText} = xhr
					// Always process the final line
					const lastIndex = responseText.lastIndexOf('\n', responseText.length - 2)
					let chunk = responseText
					if (lastIndex !== -1)
						chunk = responseText.substring(lastIndex)
					try {
						const data = JSON.parse(chunk)
						updateChat(
							+uuid,
							index,
							{
								dateTime: new Date().toLocaleString(),
								latex_src: "null",
								text_src: "http://106.53.97.117:7777/static/null",
								text: lastText + (data.text ?? ''),
								inversion: false,
								error: false,
								loading: true,
								conversationOptions: {conversationId: data.conversationId, parentMessageId: data.id},
								requestOptions: {prompt: message, options: {...options}},
							},
						)

						if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
							options.parentMessageId = data.id
							lastText = data.text
							message = ''
							return fetchChatAPIOnce()
						}
					} catch (error) {
						//
					}
				},
			})
			updateChatSome(+uuid, index, {loading: false})
		}
		await fetchChatAPIOnce()
	} catch (error: any) {
		if (error.message === 'canceled') {
			updateChatSome(
				+uuid,
				index,
				{
					loading: false,
				},
			)
			return
		}

		const errorMessage = error?.message ?? t('common.wrong')

		updateChat(
			+uuid,
			index,
			{
				dateTime: new Date().toLocaleString(),
				latex_src: "null",
				text_src: "http://106.53.97.117:7777/static/null",
				text: errorMessage,
				inversion: false,
				error: true,
				loading: false,
				conversationOptions: null,
				requestOptions: {prompt: message, options: {...options}},
			},
		)
	} finally {
		loading.value = false
	}
}

function handleExport() {
	if (loading.value)
		return
	const d = dialog.warning({
		title: t('chat.exportImage'),
		content: t('chat.exportImageConfirm'),
		positiveText: t('common.yes'),
		negativeText: t('common.no'),
		onPositiveClick: async () => {
			try {
				d.loading = true
				const ele = document.getElementById('image-wrapper')
				const canvas = await html2canvas(ele as HTMLDivElement, {
					useCORS: true,
				})
				const imgUrl = canvas.toDataURL('image/png')
				const tempLink = document.createElement('a')
				tempLink.style.display = 'none'
				tempLink.href = imgUrl
				tempLink.setAttribute('download', 'chat-shot.png')
				if (typeof tempLink.download === 'undefined')
					tempLink.setAttribute('target', '_blank')

				document.body.appendChild(tempLink)
				tempLink.click()
				document.body.removeChild(tempLink)
				window.URL.revokeObjectURL(imgUrl)
				d.loading = false
				ms.success(t('chat.exportSuccess'))
				Promise.resolve()
			} catch (error: any) {
				ms.error(t('chat.exportFailed'))
			} finally {
				d.loading = false
			}
		},
	})
}

function handleDelete(index: number) {
	if (loading.value)
		return

	dialog.warning({
		title: t('chat.deleteMessage'),
		content: t('chat.deleteMessageConfirm'),
		positiveText: t('common.yes'),
		negativeText: t('common.no'),
		onPositiveClick: () => {
			chatStore.deleteChatByUuid(+uuid, index)
		},
	})
}

function handleClear() {
	//删除全部记录 时候 把
	state.middle = ""
	console.log("已经清空")
	localStorage.removeItem("genertext")
	state.gernaltext = "";
	localStorage.removeItem("genertexts")
	localStorage.removeItem("maxcontent")
	localStorage.removeItem("zhipuimg")
	if (loading.value)
		return

	dialog.warning({
		title: t('chat.clearChat'),
		content: t('chat.clearChatConfirm'),
		positiveText: t('common.yes'),
		negativeText: t('common.no'),
		onPositiveClick: () => {
			chatStore.clearChatByUuid(+uuid)
		},
	})
}


function handleEnter(event: KeyboardEvent) {
	//假如不是给机器发消息
	if (!isMobile.value) {
		if (event.key === 'Enter' && !event.shiftKey) {
			event.preventDefault()
			handleSubmit(String(0), String(0), "1")
		}

		//
	} else {
		if (event.key === 'Enter' && event.ctrlKey) {
			event.preventDefault()
			handleSubmit(String(0), String(0), state.modelc)
		}
	}
}

function handleStop() {
	if (loading.value) {
		controller.abort()
		loading.value = false
	}
}

// 可优化部分
// 搜索选项计算，这里使用value作为索引项，所以当出现重复value时渲染异常(多项同时出现选中效果)
// 理想状态下其实应该是key作为索引项,但官方的renderOption会出现问题，所以就需要value反renderLabel实现
const searchOptions = computed(() => {
	if (prompt.value.startsWith('/')) {
		return promptTemplate.value.filter((item: { key: string }) => item.key.toLowerCase().includes(prompt.value.substring(1).toLowerCase())).map((obj: { value: any }) => {
			return {
				label: obj.value,
				value: obj.value,
			}
		})
	} else {
		return []
	}
})
// value反渲染key
const renderOption = (option: { label: string }) => {
	for (const i of promptTemplate.value) {
		if (i.value === option.label)
			return [i.key]
	}
	return []
}
const placeholder = computed(() => {
	if (isMobile.value)
		return t('chat.placeholderMobile')
	return t('chat.placeholder')
})
const buttonDisabled = computed(() => {
	return loading.value || !prompt.value || prompt.value.trim() === ''
})
const footerClass = computed(() => {
	let classes = ['p-4']
	if (isMobile.value)
		classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
	return classes
})
//子传父 设置
const setting = () => {
	emit('item-setting')
}
const handleUploadSuccess = (data: any) => {
	state.empmode = "聊天模式";
	state.modelc = "1";
	state.currentModeIndex = 4
	// 子传父 文件上传
	ms.info('文件上传成功！正在识别中', {duration: 0}) // 设置duration为0，让它一直存在直到手动清除
	axios.get(`http://106.53.97.117:2088/generate/${localStorage.getItem("username")}${data.file.file.name.split('.')[0]}.jpg`)
		.then(res => {
			ms.destroyAll();
			ms.success('识别成功，准备给出分析')
			state.showModal = false;
			state.latexcontent = "显示模式 (Display Mode)：如果您希望公式单独显示一行、较大、且居中，那么可以使用两个美元符号包裹 LaTeX 代码。这称为显示模式。您可以告诉我使用显示模式展示公式或者直接提供两个美元符号包裹的 LaTeX 代码，如 $$x=y$$。  请展示如下数学公式。" + JSON.stringify(res.data.latex)
			// localStorage.removeItem("zhipuimg")
			// dataSources.value.push({"text": renderMath(res.data.latex)})
			//设置图片的值  进入  如果没有启动这个 图片值默认 null
			state.latexadr = `http://106.53.97.117:2088/static/${localStorage.getItem("username")}${data.file.file.name.split('.')[0]}.jpg`
			onConversation("0", "0", "8")
		})
		.catch(err => {
			console.error(err);
		});
}


//轮询会话
// 定义一个要周期性执行的函数
function fetchData() {
	// console.log("会话正在监听中...")  在 loading时候 不执行这个程序
	get_other_last_msg();
}

// 设置轮询间隔，例如：5000毫秒（5秒）
const pollingInterval = 1000 as number;


const get_other_last_msg = () => {
	state.new_msg = "消息启动"
	//gpt开始说话
	// if (state.new_msg == "消息启动") {
	// 	g4model("你好")
	// }
	if (loading.value) {
		console.log("不执行此程序")
	} else {
		let get_orther_stuct = {
			"name": localStorage.getItem("username"),
			"room_id": 1001,
			"msg_type": 0,
			"weitiao": "",
			"msg": prompt.value // 假设prompt是一个包含用户输入信息的对象
		};

// 使用axios.post方法进行POST请求
		axios.post('http://106.53.97.117:7777/v1/insert-msg', get_orther_stuct)
			.then(res => {
				if (res.data.result[1] == 500) {
					console.log("-----------------------")
				} else {
					//	查到有结果  则进行 更新失活  然后写入对方结果
					if (res.data.result.length > 0) {
						//单独对话模式 这里实现和文件状态互动
						for (let k = 0; k < res.data.result.length; k++) {
							addChat(
								+uuid,
								{
									dateTime: new Date().toLocaleString(),
									latex_src: "null",
									text_src: "http://106.53.97.117:7777/static/null",
									text: "Talk by " + res.data.result[k].name + "：" + res.data.result[k].msg,
									inversion: false,
									loading: false,
									error: false,
									conversationOptions: null,
									requestOptions: {prompt: "", options: null},
								},
							)
						}
						scrollToBottom()

						state.new_msg = "消息已刷新"
						//来自对话问候 gpt开始说话
						if (state.new_msg == "消息已刷新") {
							g4model(res.data.result[res.data.result.length - 1].weitiao)
						}
						console.log(state.new_msg)
						//	当消息启动 时候  用户需要和gpt对话
						// if (res.data.result[res.data.result.length - 1].msg.length > 10) {
						// 	g4model(res.data.result[res.data.result.length - 1].msg)
						// }
					}
				}
			})

	}

}


onMounted(() => {
	localStorage.setItem("history_state", JSON.stringify(usingContext.value))
	//检查更新：
	if (localStorage.getItem("upgradestatus") == "false") {
		state.changjingshowModal = false;
	} else {
		if (localStorage.getItem("username")) {
			state.changjingshowModal = true;
		}
	}

	// 开始会话  如果进入了 1001房间
	if (localStorage.getItem("room_id")) {
		state.room_id = localStorage.getItem("room_id") + "房"
		setInterval(fetchData, pollingInterval);
	}
	//渲染加载模式列表
	modein();
	if (localStorage.getItem('maxcontent')) {
		state.maxcontent = parseInt(<string>localStorage.getItem('maxcontent'))
	} else {
		state.maxcontent = 0;
	}
	if (localStorage.getItem('genertexts')) {
		state.gernaltext = <string>localStorage.getItem('genertexts')
	} else {
		state.gernaltext = "";
	}
	//获取当前数据
	if (!localStorage.getItem('genertext')) {
		console.log('-------------------')
	} else {
		state.gner_filelist = JSON.parse(<string>localStorage.getItem('genertext'));
	}


	state.pdfshitu = `http://106.53.97.117:2088/static/` + localStorage.getItem("username") + ".pdf?" + new Date().getTime()
	if (localStorage.getItem("pdfstate") != null) {
		state.disabled = false;
	}
	if (localStorage.getItem("datastate") != null) {
		state.disabled = false;
	}
	if (localStorage.getItem("fujianstate") != null) {
		state.disabled = false;
	}
// 转换为布尔值
	state.pdfstate = localStorage.getItem("pdfstate") === 'true';

	state.datastate = localStorage.getItem("datastate") === 'true';

	state.fujianstate = localStorage.getItem("fujianstate") === 'true';
	state.xlsx1filename = <string>localStorage.getItem("xlxs1name")
	state.xlsx2filename = <string>localStorage.getItem("xlxs2name")
	state.xlsx3filename = <string>localStorage.getItem("xlxs3name")
	state.pdffilename = <string>localStorage.getItem("pdffilename")
	state.csv1filename = <string>localStorage.getItem("csv1filename")
	state.fujianfilename = <string>localStorage.getItem("fujianfilename")
	//附件一开槽数据状态
	state.xlsx1state = localStorage.getItem("xlsx1state") === 'true';
	state.xlsx2state = localStorage.getItem("xlsx2state") === 'true';
	state.xlsx3state = localStorage.getItem("xlsx3state") === 'true';

	axios.get(`http://106.53.97.117:2088/sql?sql=select * from admin where name='${localStorage.getItem('username')}' `,).then((res) => {
		if (res.data.data[0]) {
			//往服务A区域存入数据状态
			localStorage.setItem('梦想版', res.data.data[0].scorea)
			localStorage.setItem('精灵版', res.data.data[0].scoreb)
			state.scorea = Number(localStorage.getItem("梦想版"));
			state.scoreb = Number(localStorage.getItem("精灵版"));
		} else {
			//就是未登录的状态，必须是新手状态，这里给出新手的使用次数以及使用逻辑！ 用locatl存储45次使用次数 并此种情况下禁止上传替换掉模板赛题！
			// 这里监听信号为 novice:新手 逻辑响应  子传父
			dialog.success({
				title: 'Maxstudio',
				content: '你好~ 数学建模！！！',
				positiveText: '登录',
				negativeText: '注册',
				maskClosable: false, // 禁用点击对话框外部关闭对话框
				closable: false, // 禁用关闭按钮
				onNegativeClick: () => {
					location.href = 'http://freesgpt.cn/messagelogin.html'
					// 改变novice的状态
					state.showModal2 = false;
					setTimeout(() => {
						state.newbtn = "下一步 1/30";
						state.newbtnloading = false;
						state.newbtnstate = false;
					}, 10000)
				},// 打开新窗口
				onPositiveClick: () => {
					emit('item-login')
					// state.novice = !state.novice;
					// emit('item-novice')
				} // 打开新窗口
			})
		}
	})
	scrollToBottom()
	scrollToBottom()
	if (inputRef.value && !isMobile.value)
		inputRef.value?.focus()
})
// onUnmounted(() => {
// 	if (loading.value)
// 		controller.abort()
// })

//


function stopAnalysis() {
	location.reload();
}

const handleSwitchStatusChange = (val: any, index: any) => {
	if (val) {
		state.maxcontent += state.gner_filelist[index].nodisplaycontent.length;
		// 如果开关打开，把内容添加到列表中
		state.gner_filelist[index].content = state.gner_filelist[index].nodisplaycontent;
		localStorage.setItem("maxcontent", JSON.stringify(state.maxcontent))

	} else {
		// 如果开关关闭，把列表中的内容移除
		state.maxcontent = state.maxcontent - state.gner_filelist[index].content.length;
		state.gner_filelist[index].content = "";
		localStorage.setItem("maxcontent", JSON.stringify(state.maxcontent))

	}
//	合成当前数据
	state.gernaltext = "";
	for (let i = 0; i < state.gner_filelist.length; i++) {
		state.gernaltext += state.gner_filelist[i].content
	}
	localStorage.setItem("genertexts", JSON.stringify(state.gernaltext))
//	存储对应的状态  也就是存储filelist
	localStorage.setItem("genertext", JSON.stringify(state.gner_filelist))

}

//文件上传前
const berfot = () => {
	ms.warning("正在上传")
}

//新手教程
const readme = () => {
//	动态改变图片
	if (state.newpicsindex < 30) {
		state.newpicsindex++
		state.newbtn = "下一步" + String(state.newpicsindex) + "/30";
		state.newbtnloading = true;
		state.newbtnstate = true;
		setTimeout(() => {
			state.newbtnloading = false;
			state.newbtnstate = false;
		}, 1000)
		state.nespic = "http://freesgpt.cn/x" + state.newpicsindex + ".jpg"
	} else {
		state.newbtn = "教程结束"
		dialog.success({
			title: '成功仅仅7次请求，了解研究生竞赛子问题一基本求解情况！恭喜💞💞💞!',
			content: '您已掌握基础操作，更多功能，尽情自我施展！祝您数模竞赛愉快~！',
			positiveText: '没看懂，再来一遍！',
			negativeText: '我已了解，就让我来练练！',
			maskClosable: false, // 禁用点击对话框外部关闭对话框
			closable: false, // 我已经了解
			onNegativeClick: () => {
				state.showModal2 = false;
			},// 打开新窗口
			onPositiveClick: () => {
				// 改再练一遍
				state.nespic = "http://freesgpt.cn/x1.jpg",
					state.newpicsindex = 1;
				state.newbtn = "下一步" + String(state.newpicsindex) + "/30";
			} // 打开新窗口
		})
	}
}


const ocrgnerbeforeUpload = (data: any) => {
	const file = data.file.file;
	if (file.size > 5120000000) { // 检查文件大小是否超过50KB
		ms.error('文件大小不能超过5MB，请重新上传');
		return false; // 返回false以取消上传
	}
	state.latexadr = `http://106.53.97.117:2088/upload?filename=${localStorage.getItem("username")}${data.file.file.name.split('.')[0]}.jpg`
	state.latexadrs = `http://106.53.97.117:2088/static/${localStorage.getItem("username")}${data.file.file.name.split('.')[0]}.jpg`
	return true; // 返回true继续上传
}


//模型切换选择
const model_select = (e: any) => {
	state.model_value = e
	if (state.model_value == '社 区 模 式') {
		console.log(state, "启动社区模式")

	}
	// 找到选中的选项对象
	const selectedOption = state.model_options.find(option => option.value === e);
	if (selectedOption) {
		//如果触发了选择的项目   弹出请稍后  展示这个项目的一些功能
		//子通信触发  通信
		emit('item-xunlian', [selectedOption.label])
		// 现在你可以访问 selectedOption 的所有属性，比如 muban_list
		// console.log("muban_list: ", selectedOption.muban_list);
	}
}

//地址跳转
const converherf = (e: any) => {
	switch (e) {
		case 1:
			location.href = "http://106.53.97.117:3031";
			break;
		case 2:
			location.href = "http://106.53.97.117:3031";
			break
		case 3:
			location.href = "http://106.53.97.117:8000";
			break;
		case 4:
			location.href = "http://106.53.97.117:3031";
			break;
		case 6:
			location.href = "http://106.53.97.117:3031";
			break;
		default:
			location.href = "http://freecup.cn"
			break;
	}
}


//zhipu上传文件
const customRequest = async ({file, onProgress, onFinish, onError}: any) => {
	const formData = new FormData();
	formData.append('file', file.file);

	try {
		notification.info({
			title: `任务图片正在解析中...请稍后..`,
			duration: 3000,
			closable: true,
		})
		loading.value = true
		const response = await axios.post('http://106.53.97.117:7777/v1/ai-import', formData, {
			headers: {
				'Content-Type': 'multipart/form-data',
			},
			onUploadProgress: (progressEvent: any) => {
				if (progressEvent.total > 0) {
					// 计算上传进度百分比
					const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
					onProgress({percent: percentCompleted});
				} else {
					// 如果 progressEvent.total 为零,将上传进度设置为 0
					onProgress({percent: 0});
				}
			},
		});
		onFinish();
		loading.value = false;
		//存入缓存中
		state.zhipuimg = `http://106.53.97.117:7777/static/${JSON.stringify(response.data.result.url).replace(/"/g, '')}`
		localStorage.setItem("zhipuimg", JSON.stringify(response.data.result.content))
		localStorage.setItem("zhipuimgurl", JSON.stringify(response.data.result.url))
		state.draution = 1;
		notification.destroyAll();
		addChat(
			+uuid,
			{
				dateTime: new Date().toLocaleString(),
				text_src: state.zhipuimg,
				latex_src: "null",
				text: `${response.data.result.content}`,
				loading: false,
				inversion: false,
				error: false,
				conversationOptions: null,
				requestOptions: {prompt: `${response.data.result.content}`, options: null},
			},
		)

		//处理最新数据
		// await onConversation("1", "？"+JSON.stringify(response.data.result), "0");
		// 处理上传成功后的逻辑
	} catch (error) {
		ms.error("解析失败！ 请注意图片的尺寸大小或者格式！")
		onError();
		console.error('Upload error:', error);
		// 处理上传失败的逻辑
	}
};

const handleUploadFinish = ({file, event}: any) => {
	console.log("--------------")
	// 处理上传完成后的逻辑
};

//图片加载业务
const notification = useNotification()

const onvisible = () => {
	console.log("------------------")
	state.room_status = 0
}
</script>

<template>
	<Permission @update-visible="onvisible"
							:visible="state.room_status"/>
	<div class="flex flex-col w-full h-full">
		<n-button-group style="display: none;">
			<n-button ghost>
				<template #icon>
					<n-icon>
						<log-in-icon/>
					</n-icon>
				</template>
				任务农场
			</n-button>
		</n-button-group>
		<HeaderComponent
			v-if="isMobile"
			:using-context="usingContext"
			@export="handleExport"
			@handle-clear="handleClear"
			@handle-modein="modein"
			@handle-setting="setting"
			@handle-history="toggleUsingContext"
		/>
		<main class="flex-1 overflow-hidden" style="padding-bottom: 50px">
			<!--			设置主程序选项切换卡-->
			<span style="position: fixed;font-size: 14px;
			padding: 5px;font-family: '微软雅黑 Light'"><span style="font-size:15px;display: none">{{
					state.empmode
				}}</span></span>
			<!--			核心线程模式！！！-->
			<n-select
				@change="model_select"
				:value="state.model_value"
				:options="state.model_options" size="small"
				style="width: 200px;position: relative;top:2px;border-radius: 20px;padding-top: 5px"
				:consistent-menu-width="true">
				<template #arrow>
					<transition name="slide-left">
						<SvgIcon icon="ri-planet-fill"/>
					</transition>
				</template>
			</n-select>
			<center>
							<span style="font-size:10px;opacity: 0.4;
							width: 200px;position: relative;top:-30px;
							border-radius: 20px;padding-top: 5px">—— 木叶🍃飞舞之下，火🔥亦生生不息 ——</span>
			</center>
			<!--									<span style="position: absolute;top: 10px;right: 19px;opacity: 0.9;font-family: '等线 Light'">-->
			<!--															UP 主 微 信：zwj13351752870<br>-->
			<!--							购 买 请 点 击：-->
			<!--									<n-button-group>-->
			<!--									<n-badge>-->
			<!--										<template #default>-->
			<!--											<n-button @click="converherf(3)">-->
			<!--												<template #icon>-->
			<!--													<SvgIcon icon="ri-emotion-laugh-line"/>-->
			<!--													<span style="color:#d97801;">续费</span>-->
			<!--												</template>-->
			<!--											</n-button>-->
			<!--										</template>-->
			<!--									</n-badge>-->
			<!--									<n-badge>-->
			<!--										<template #default>-->
			<!--											<n-button @click="converherf(3)">-->
			<!--												<template #icon>-->
			<!--													<SvgIcon icon="ri-emotion-unhappy-line"/>-->
			<!--																										<span style="color:#d97801;">充值</span>-->
			<!--												</template>-->
			<!--											</n-button>-->
			<!--										</template>-->
			<!--									</n-badge>-->
			<!--								</n-button-group>-->
			<!--						</span>-->

			<n-badge type="success" size="small" style="font-size:12px;opacity: 0.8;
							width: 90px;position: absolute;top:0px;right: 5px;
							padding-top: 5px"><a href="http://106.53.97.117:8000/">续 费 购 买 </a></n-badge>
			<div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
				<div
					id="image-wrapper"
					class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
					:class="[isMobile ? 'p-2' : 'p-4']"
				>
					<template v-if="!dataSources.length">
						<div v-if="state.model_value !='社 区 模 式'">
							<div style="padding-top:5%;color: #4dbd49;opacity: 0.9"
									 class="flex items-center justify-center mt-4 text-center text-neutral-300">
								<h1 style="font-family: '微软雅黑 ';font-size: 30px;">

									<n-button @click="converherf(2)"
														style="border-bottom-left-radius: 10px;display: none;margin-top: 40%;
																background-color: #e3a1c5;color: white;border-top-left-radius: 10px;
																font-size: 24px;font-family: '等线 Light';
								border-bottom-right-radius: 0;border-top-right-radius: 0;">
										<SvgIcon icon="ri-ball-pen-fill"/> &nbsp;&nbsp;4.0
									</n-button>
									<!-- 清空按钮 -->
									<n-tooltip trigger="hover">
										<template #trigger>
											<n-button @click="converherf(1)"
																style="
								font-size: 24px;font-family: '等线 Light';border: none;
						margin-top: 10%">
												<SvgIcon icon="ri-quill-pen-line"/> &nbsp;数模神器 &nbsp; <span
												style="color:#ff8b09;">5.0 version  </span>
												<span style="font-size: 8px;position: relative;top: -10px;color: orange	">&nbsp; 同人产品 </span>
											</n-button>

										</template>
										同人之作，秉持初心， 木叶🍃飞舞之下！火🔥亦生生不息
									</n-tooltip>
									<!-- 预览按钮 -->
									<n-button @click="converherf(5)"
														style="border-top-right-radius: 10px;border-bottom-right-radius: 10px;display: none;
																	background-color: #ca3fce;color: white;
																	font-size: 24px;font-family: '等线 Light';
								border-bottom-left-radius: 0;border-top-left-radius: 0;">
										<SvgIcon icon="ri-home-wifi-fill"/>
										&nbsp; &nbsp;工会
									</n-button>
									<br>
									<n-button-group>
										<n-button @click="converherf(4)"
															style="background-color:  #63a75e;color: white;display: none;
								font-size: 24px;font-family: '等线 Light';
								border-bottom-left-radius: 10px;border-top-left-radius: 10px;
								border-bottom-right-radius: 0;">
											<SvgIcon icon="ri-quill-pen-line"/> &nbsp; &nbsp;4.0
										</n-button>
										<n-button @click="converherf(6)"
															style="background-color:  #63a75e;color: white;display: none;
								font-size: 24px;font-family: '等线 Light';
														border-bottom-right-radius: 10px;border-top-right-radius: 10px;
							border-radius: 10px;">
											<SvgIcon icon="ri-quill-pen-line"/> &nbsp; &nbsp;Dalle3
										</n-button>
									</n-button-group>
								</h1>
							</div>
						</div>

					</template>
					<template v-else>
						<div>
							<Message
								v-for="(item, index) of dataSources"
								:key="index"
								:date-time="item.dateTime"
								:text="item.text"
								:inversion="item.inversion"
								:error="item.error || undefined"
								:loading="item.loading"
								:text_src="item.text_src || undefined"
								:latex_src="item.latex_src || undefined"
								@regenerate="onRegenerate(index)"
								@delete="handleDelete(index)"
							/>
							<div class="sticky bottom-0 left-0 flex justify-center">
								<NButton v-if="loading" type="warning" @click="handleStop">
									<template #icon>
										<SvgIcon icon="ri:stop-circle-line"/>
									</template>
									{{ t('common.stopResponding') }}
								</NButton>
							</div>
						</div>
					</template>
				</div>
			</div>
		</main>
		<div v-if="state.model_value !='社 区 模 式'">
			<footer :class="footerClass">
				<div class="w-full max-w-screen-xl m-auto">
					<div class="flex items-center justify-between space-x-0.5">
						<n-tooltip trigger="hover">
							<template #trigger>
								<HoverButton v-if="!isMobile" @click="handleClear" style="display: block">
            <span class="text-xl text-[#4b9e5f] dark:text-[#4b9e5f]">
              <SvgIcon icon="ri:delete-bin-line"/>
            </span>
								</HoverButton>
							</template>
							删除全部记录
						</n-tooltip>

						<!--						<HoverButton v-if="!isMobile" @click="handleExport">-->
						<!--            <span class="text-xl text-[#4b9e5f] dark:text-[#4b9e5f]">-->
						<!--              <SvgIcon icon="ri:download-2-line"/>-->
						<!--            </span>-->
						<!--						</HoverButton>-->


						<n-tooltip trigger="hover">
							<template #trigger>
								<n-badge style="display: none" :value="state.room_id" type="success">
									<HoverButton style="display: none" v-if="!isMobile" @click="state.room_status+=1">
            <span class="text-xl text-[#4b9e5f] dark:text-[#4b9e5f]">
              						<SvgIcon icon="ri-team-line"/>
            </span>
									</HoverButton>
								</n-badge>
							</template>
							进入内测房间
						</n-tooltip>


						<n-tooltip trigger="hover">
							<template #trigger>
								<n-badge value="😁" type="info">
									<HoverButton v-if="!isMobile" @click="openzhipuimg1">
            <span class="text-xl text-[#4b9e5f] dark:text-[#4b9e5f]">
              <SvgIcon icon="ri-formula"/>
            </span>
									</HoverButton>
								</n-badge>
							</template>
							Latex公式识别
						</n-tooltip>


						<n-tooltip trigger="hover">
							<template #trigger>

								<n-badge value="😏" type="success">
									<HoverButton v-if="!isMobile" @click="openzhipuimg2">
            <span class="text-xl text-[#4b9e5f] dark:text-[#4b9e5f]">
              <SvgIcon icon="ri-folder-6-fill"/>
            </span>
									</HoverButton>
								</n-badge>
							</template>
							赛题/文献上传
						</n-tooltip>

						<!--						论文识别上传按钮-->


						<n-upload
							ref="uploadRef1"
							style="display: none;"
							@finish="handleUploadSuccess"
							directory-dnd
							list-type="image-card"
							@before-upload="ocrgnerbeforeUpload"
							:action="state.latexadr">
							<n-upload-dragger style="border-radius: 12px; ">
								<div style="font-size: 40px;position: relative;top:-3px;">
									＋
								</div>
							</n-upload-dragger>
						</n-upload>

						<n-upload
							ref="uploadRef"
							action="http://106.53.97.117:7777/v1/ai-import"
							:custom-request="customRequest"
							:on-finish="handleUploadFinish"
							style="display: none;"
						>
							<n-button>上传图片</n-button>
						</n-upload>


						<n-upload
							ref="uploadRef2"
							style="display: none;"
							directory-dnd
							:action="state.generl_file"
							:on-before-upload="berfot"
							@finish="finishgegenerlfile"
							@change="handlechangegenerlfile"
							:max="10"
							:max-size="512000"
							:show-file-list="false"
						>
							<n-upload-dragger style="border-radius:2px; height: 300px">
								<div style="margin-bottom: 12px">
									<n-icon size="148" style="font-size: 150px;color: rgb(54,173,106)" :depth="3">
										+
									</n-icon>
								</div>
							</n-upload-dragger>
						</n-upload>


						<n-tooltip trigger="hover">
							<template #trigger>
								<n-badge value="🤩">
									<HoverButton v-if="!isMobile" @click="openzhipuimg"
															 :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
										<Icon icon="mdi:images" style="font-size: 22px"/>
									</HoverButton>
								</n-badge>
							</template>
							图像识别
						</n-tooltip>

						<n-tooltip trigger="hover">
							<template #trigger>
								<n-badge value="🙂" type="success">
									<HoverButton v-if="!isMobile"
															 :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
											            <span class="text-xl"
																				:class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
														<n-dropdown v-if="!isMobile" trigger="hover" :options="state.options"
																				@select="handleSelect">
						  <SvgIcon icon="ri-brush-fill"/>
					</n-dropdown>
					</span>
									</HoverButton>
								</n-badge>
							</template>
							论文魔法刷
						</n-tooltip>

						<n-tooltip trigger="hover">
							<template #trigger>
								<n-badge value="😎" type="success">
									<HoverButton v-if="!isMobile" @click="zhipulianwang()">
            <span class="text-xl" :class="{ 'text-[#4b9e5f]': state.net_state, 'text-[#a8071a]': !state.net_state }">
              <SvgIcon style="position: relative;top: 0;font-size: 22px" icon="ri-global-line"/>
            </span>
									</HoverButton>
								</n-badge>
							</template>
							联网
						</n-tooltip>


						<n-tooltip trigger="hover">
							<template #trigger>
								<HoverButton v-if="!isMobile" @click="toggleUsingContext">
            <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
              <SvgIcon style="position: relative;top: 0px;font-size: 22px" icon="ri:chat-history-line"/>
            </span>
								</HoverButton>
							</template>
							记忆开关
						</n-tooltip>


						<HoverButton
							style="display: none;" v-if="isMobile &&  state.novice"
							@click="state.showModal = true">
											            <span class="text-xl">
								 <SvgIcon icon="ri-gallery-upload-fill"/></span>
						</HoverButton>
						<HoverButton style="display: none;" v-if="!isMobile &&  state.novice" @click="state.showModal = true">
											            <span class="text-xl">
								 <SvgIcon icon="ri-gallery-upload-fill"/></span>
						</HoverButton>
						<HoverButton @click="modein" v-if="isMobile">
											            <span class="text-xl"
																				:class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
					<n-dropdown v-if="isMobile" trigger="hover" :options="state.options"
											@select="handleSelect">
											  <SvgIcon :icon="currentIcon"/>
					</n-dropdown>
					</span>
						</HoverButton>

						<HoverButton style="display: none;" v-if="!isMobile" @click="state.showOuter=!state.showOuter">
            <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
              <SvgIcon style="position: relative;top: 4px;" icon="ri-home-wifi-fill"/>
            </span>
						</HoverButton>
						<NAutoComplete v-if="state.autofenxistate==false" v-model:value="prompt" :options="searchOptions"
													 :render-label="renderOption">
							<template #default="{ handleInput, handleBlur, handleFocus }">
								<NInput
									ref="inputRef"
									v-model:value="prompt"
									type="textarea"
									:placeholder="placeholder"
									:autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
									@input="handleInput"
									@focus="handleFocus"
									@blur="handleBlur"
									@keypress="handleEnter"
								/>
							</template>
							<!--							handleSubmit('0','0',state.modelc);-->
						</NAutoComplete>
						<NButton v-if="state.autofenxistate==false"
										 type="primary" :disabled="buttonDisabled" @click="handleSubmit('0','0','1' )">
							<template #icon>
              <span class="dark:text-black">
                <SvgIcon icon="ri:send-plane-fill"/>
              </span>
							</template>
						</NButton>
						<NButton type="error" v-if="state.autofenxistate==true"
										 @click="stopAnalysis">
							<template #icon>
              <span class="dark:text-black">
                <SvgIcon icon="ri-spam-3-line"/>
              </span>
							</template>
							终止分析
						</NButton>
					</div>
				</div>
			</footer>
		</div>

		<span style="position: absolute;right: 0px;top: 45%;display: none">
			<a href="javascript:void(0);" @click="state.showOuter=true">
				<SvgIcon class="file-items"
								 icon="ri-arrow-left-circle-fill"/>
			</a>
			</span>
		<!--		抽屉-->
		<n-drawer v-model:show="state.showOuter" :width="302">
			<n-drawer-content title="斯通纳">
				<NTabs type="line" animated>
					<NTabPane name="General1s" tab="General1s">
						<template #tab>
							<SvgIcon class="text-lg" icon="ri:file-user-line"/>
							<span class="ml-2">我的产出</span>
						</template>
						<div>
							<div class="file-list">
								<!-- 循环遍历文件数组 -->
								<div
									v-for="(file, index) in state.files"
									:key="index"
									style="padding: 10px;border-radius: 3px;"
									class="file-item"
									@mouseover="state.hover = index"
									@mouseleave="state.hover = null"
									@click="handleClick(file.name)"
								>
									<img
										:src="file.imageSrc"
										alt="File Image"
										class="file-image"
									/>
									<div class="file-name">{{ file.name }}</div>
								</div>
							</div>
						</div>
					</NTabPane>
					<NTabPane name="General2" tab="General2">
						<template #tab>
							<SvgIcon class="text-lg" icon="ri:file-user-line"/>
							<span class="ml-2">产出中</span>
						</template>
					</NTabPane>

					<NTabPane name="General3" tab="General3">
						<template #tab>
							<SvgIcon class="text-lg" icon="ri:file-user-line"/>
							<span class="ml-2">待处理</span>
						</template>
					</NTabPane>
				</NTabs>
			</n-drawer-content>
		</n-drawer>


		<n-modal
			v-model:show="state.showModal"
			:mask-closable="false	"
			:closable="false	"
			preset="card"
			style="width:1000px;border-radius: 15px;display: none;
			margin-top: 30px;height: 700px;overflow-y: scroll;"
			content="你确认"
		>
			<n-card
				:bordered="false"
				size="huge"
				role="dialog"
				aria-modal="true"
			>

				<div style="padding-top: 5px;text-align: center;">
					<h1 style="font-family: 黑体;font-size:30px;color: rgb(54,173,106)">
						赛题上传 <span style="color: red;font-size: 16px">支持各种文档类型（PDF/PPT/TXT/xlsx/xls/csv/doc/docx/json)</span>
					</h1>
					<n-divider/>
					<div class="upload-container">
						<n-tooltip trigger="hover">
							<template #trigger>
								<n-upload
									directory-dnd
									:action="state.generl_file"
									:on-before-upload="berfot"
									@finish="finishgegenerlfile"
									@change="handlechangegenerlfile"
									:max="10"
									:max-size="512000"
									:show-file-list="false"
								>

									<n-upload-dragger style="border-radius:2px; height: 300px">
										<div style="margin-bottom: 12px">
											<n-icon size="148" style="font-size: 150px;color: rgb(54,173,106)" :depth="3">
												+
											</n-icon>
										</div>
									</n-upload-dragger>
								</n-upload>
							</template>
							支持doc/docx/ppt/pptx/odx/txt/pdf/xls/xlsx/md/json等各类文本格式上传
						</n-tooltip>
					</div>
					<br><span style="color: #19c48d;font-family: 黑体;"> 当前读入：</span>
					<span style="color: #19c48d;font-family: 黑体;font-size: 40px;"> {{ state.maxcontent }}</span> / <span
					style="color: orangered;font-family: 黑体;font-size: 20px;">MAX 30页 M5推理内核</span>
					<span v-if="state.maxcontent>140000" style="color: red;font-size: 60px;"> 警告⚠ 超出！</span>
					<n-divider/>
					<div class="container">
						<n-card
							class="card"
							v-for="(file, index) in state.gner_filelist"
							:key="index"
							style="margin-bottom: 10px;"
						>
							<n-space>
								<div style="font-size: 18px;">
									<n-gradient-text style="float: left;" type="error">
										📄 文件名：{{ file.name }}
									</n-gradient-text>
									<br>
									<n-gradient-text style="float: left;" type="info">
										🗒️ 字数大小： {{ file.length }} 字
									</n-gradient-text>
									<br>
									<n-gradient-text style="float: left;" type="success">
										⏰️ 是否接入：
										<n-switch size="small" style="margin-right:  25px;" :round="false"
															v-model:value="file.switchStatus"
															@update:value="(val) => handleSwitchStatusChange(val, index)"/>
									</n-gradient-text>

									<br>

								</div>
							</n-space>
						</n-card>
					</div>

					<br>
					<center>
						<h1 style="font-family: '微软雅黑 ';font-size:24px;color: red">
							MAX-STUDIO4.0 <span style="color: #19c48d">识别 免费内测</span>
						</h1>
					</center>
					<n-divider/>
					<p style="color: red;font-size: 20px">识别出来的如果含有[]并未展示公式，请点击右下角下载为doc格式查看！！！ 因为转化的格式不一样！</p>
				</div>
				<!--								无需展示的地方-->
			</n-card>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<div style="text-align: center;display: none;">
				<h1 style="font-family: '微软雅黑 Light';font-size:20px;">
					赛题上传 (β版)
					<n-button type="primary" size="small" @click="state.showModal3 = true">
						教程
					</n-button>
					<n-modal
						v-model:show="state.showModal3"
						:mask-closable="false"
						preset="dialog"
						title="如何正确上传pdf赛题？"
						style="width: 96%"
						content="你确认"
						positive-text="了解"
						@positive-click="onPositiveClick">
						<n-card
							:bordered="false"
							size="huge"
							role="dialog"
							aria-modal="true"
						>
							<div style="overflow-y: scroll;height: 600px;">
																	<pre style="font-family: '微软雅黑 Light';font-size: 18px">
① 确保你的pdf格式正常，识别的到，某些pdf格式比较模糊，识别不了。
② 如果pdf赛题识别出问题，刷新服务网站，重新上传即可。
③ 红色代表上传失败，你得重新上传。
								</pre>
								<center>
									<img style="width: 70%;" src="http://freesgpt.cn/j1.png"/>
								</center>
								<pre style="font-family: '微软雅黑 Light';font-size: 18px">
④ 上传完毕之后，如果你只需要进行赛题简要的思路辅助，直接进入【只看赛题】即可
										<center>
										<img style="width: 70%;" src="http://freesgpt.cn/j2.png"/>
									</center>
⑤这里标记的八个分别是【1：切换只看赛题模式】、【2：删除记录】、【3：保存图片】、【4：切换回答历史模式】、【5：简单建模模板】、【6：建模话术引导框】、【7：发送按钮】
其中，建模话术引导框是常用模式，一般在这里，xstudio的回答的潜力在于你结合赛题的话术询问的深浅。
⑥ 如下展示UP在赛题模式下，大概了解赛题的过程，首先简单预览赛题，可以看出是个电量预测问题。
											<center>
										<img style="width: 70%;" src="http://freesgpt.cn/j3.png"/>
									</center>
⑦ 进行简要的话术分析。
											<center>
										<img style="width: 70%;" src="http://freesgpt.cn/j4.png"/>
										<img style="width: 70%;" src="http://freesgpt.cn/j5.png"/>
									</center>
⑧ 现在我需要结合数据来进一步分析，上传不超过5kb大小的数据，这里一般你需要把数据简单处理，上传数据的前5~10行即可。
	<center>
										<img style="width: 70%;" src="http://freesgpt.cn/j6.png"/>
									</center>
⑨ 以下代表数据识别成功！如果未成功，可能是网络不好，请稍后刷新重试！
										<center>
										<img style="width: 70%;" src="http://freesgpt.cn/j7.png"/>
										<img style="width: 70%;" src="http://freesgpt.cn/j8.png"/>
									</center>
⑩ 先点击数据概括，让xstuido知道我有数据的！！！然后可以问它具体怎么分析，比如问题一，结合数据。
																				<center>
										<img style="width: 70%;" src="http://freesgpt.cn/j9.png"/>
										<img style="width: 70%;" src="http://freesgpt.cn/j10.png"/>
									</center>
			在这里很容易看出，xstudio对本题给出了时间序列分析算法，并且给出了比较完整的python代码，你也可以选择其它代码，提示xstudio即可！
接下来您只需要根据这些进一步互动，您可以结合您的数据编程软件，比如pycharm或者matlab!
								</pre>
								<p style="color: forestgreen;font-size: 20px;padding-bottom: 50px">
									其它的xstudio潜能UP短时间难以详述，一起来探索xstudio吧！</p>
								<center>
									<img style="width: 70%;" src="http://freesgpt.cn/j11.png"/>
									<img style="width: 70%;" src="http://freesgpt.cn/j12.png"/>
								</center>
								<p style="color: forestgreen;font-size: 20px;padding-bottom: 50px">
									目前展示公式，有基于mardown形式展示以及在线的latex图片生成器来展示，以下是UP的示例：
									<br>其它的功能宝子们自己探索！这里UP就不过多阐述。</p>
								<center>
									<img style="width: 70%;" src="http://freesgpt.cn/j13.png"/>
									<img style="width: 70%;" src="http://freesgpt.cn/j14.png"/>
									<img style="width: 70%;" src="http://freesgpt.cn/j15.png"/>
								</center>
								<br>
								<br>
								<br>
								<br>
							</div>
						</n-card>
					</n-modal>
				</h1>
				<n-divider/>
				<div class="upload-container">
					<n-tooltip trigger="hover">
						<template #trigger>
							<n-upload
								multiple
								directory-dnd
								:action="state.question_pdf"
								@finish="handleFinish1"
								@change="handlechange1"
								:max="5"
							>
								<n-upload-dragger style="border-radius:2px; ">
									<div style="margin-bottom: 12px">
										<n-icon size="48" :depth="3">
											📝
										</n-icon>
									</div>
									<n-text v-if="!state.pdfstate" style="font-size: 16px">
										(请上传PDF格式赛题！)
									</n-text>
									<n-p v-if="state.pdfstate" depth="3" style="margin: 8px 0 0 0">
										已上传✅ {{ state.pdffilename }}
									</n-p>
								</n-upload-dragger>
							</n-upload>
						</template>
						你只能上传PDF赛题，不允许上传文件过大的pdf,xstudio将不会处理！！！
					</n-tooltip>
				</div>
				<!-- 上传赛题（pdf格式) -->
				<!--上传其他附件数据-->
				<n-spin size="small" v-if="state.xlxsspinstate">
					<template #description>
						正在识别数据中
					</template>
				</n-spin>


				<center>
					<br>
					<br>

					<h1 style="font-family: '微软雅黑 Light';font-size:20px;">
						数据上传
					</h1>
				</center>
				<n-divider/>

				<div class="upload-container">
					<!--上传其他附件数据-->
					<n-tooltip trigger="hover">
						<template #trigger>
							<n-upload
								multiple
								directory-dnd
								:action="state.question_xlsxs"
								@finish="xlsxs1Finish"
								@change="xlsxschange"
								:max="5"
								:max-size="512000"
								@before-upload="beforeUpload"
							>
								<n-upload-dragger style="border-radius: 12px; ">
									<div style="margin-bottom: 12px">
										<n-icon size="48" :depth="3">
											📇
										</n-icon>
									</div>
									<n-text v-if="!state.xlsx1state" style="font-size: 16px">
										请上传.xlsx文件！
									</n-text>
									<n-p v-if="state.xlsx1state" depth="3" style="margin: 8px 0 0 0">
										已上传✅ {{ state.xlsx1filename }}
									</n-p>
								</n-upload-dragger>
							</n-upload>
						</template>
						你只能上传.xlsx文件数据，上传时候你首先把数据处理下，尽可能保留主要字段和前几行信息，以免数据过大xstudio将不会处理！！！
					</n-tooltip>

					<!--					卡槽二-->
					<n-tooltip trigger="hover">
						<template #trigger>
							<n-upload
								multiple
								directory-dnd
								:action="state.question_xlsxs"
								@finish="xlsxs2Finish"
								@change="xlsxschange"
								:max="5"
								:max-size="512000"
								@before-upload="beforeUpload"
							>
								<n-upload-dragger style="border-radius: 12px; ">
									<div style="margin-bottom: 12px">
										<n-icon size="48" :depth="3">
											📇
										</n-icon>
									</div>
									<n-text v-if="!state.xlsx2state" style="font-size: 16px">
										请上传.xlsx文件！
									</n-text>
									<n-p v-if="state.xlsx2state" depth="3" style="margin: 8px 0 0 0">
										已上传✅ {{ state.xlsx2filename }}
									</n-p>
								</n-upload-dragger>
							</n-upload>
						</template>
						你只能上传.xlsx文件数据，上传时候你首先把数据处理下，尽可能保留主要字段和前几行信息，以免数据过大xstudio将不会处理！！！
					</n-tooltip>


					<!--					卡槽三-->
					<n-tooltip trigger="hover">
						<template #trigger>
							<n-upload
								multiple
								directory-dnd
								:action="state.question_xlsxs"
								@finish="xlsxs3Finish"
								@change="xlsxschange"
								@before-upload="beforeUpload"
								:max="5"
								:max-size="512000"
							>
								<n-upload-dragger style="border-radius: 12px; ">
									<div style="margin-bottom: 12px">
										<n-icon size="48" :depth="3">
											📇
										</n-icon>
									</div>
									<n-text v-if="!state.xlsx3state" style="font-size: 16px">
										请上传.xlsx文件！
									</n-text>
									<n-p v-if="state.xlsx3state" depth="3" style="margin: 8px 0 0 0">
										已上传✅ {{ state.xlsx3filename }}
									</n-p>
								</n-upload-dragger>
							</n-upload>
						</template>
						你只能上传.xlsx文件数据，上传时候你首先把数据处理下，尽可能保留主要字段和前几行信息，以免数据过大xstudio将不会处理！！！
					</n-tooltip>
					<!--					卡槽四-->
					<n-tooltip trigger="hover">
						<template #trigger>
							<n-upload
								multiple
								directory-dnd
								:action="state.question_data"
								@finish="handleFinish2"
								@change="handlechange2"
								:max="5"
								:max-size="512000"
								@before-upload="beforeUpload"
							>
								<n-upload-dragger style="border-radius: 12px; ">
									<div style="margin-bottom: 12px">
										<n-icon size="48" :depth="3">
											🗞️
										</n-icon>
									</div>
									<n-text v-if="!state.datastate" style="font-size: 16px">
										请上传.csv文件！

									</n-text>
									<n-p v-if="state.datastate" depth="3" style="margin: 8px 0 0 0">
										已上传✅ {{ state.csv1filename }}
									</n-p>
								</n-upload-dragger>
							</n-upload>
						</template>
						你只能上传.CSV文件数据，上传时候你首先把数据处理下，尽可能保留主要字段和前几行信息，以免数据过大xstudio将不会处理！！！
					</n-tooltip>

					<!--					卡槽五-->
					<n-tooltip trigger="hover">
						<template #trigger>
							<n-upload
								multiple
								directory-dnd
								:action="state.question_fujian"
								@finish="handleFinish3"
								@change="handlechange3"
								:max="5"
							>
								<n-upload-dragger style="border-radius: 12px; ">
									<div style="margin-bottom: 12px">
										<n-icon size="48" :depth="3">
											🧾
										</n-icon>
									</div>
									<n-text v-if="!state.fujianstate" style="font-size: 16px">
										请上传.PDF文件！
									</n-text>
									<n-p v-if="state.fujianstate" depth="3" style="margin: 8px 0 0 0">
										已上传✅ {{ state.fujianfilename }}
									</n-p>
								</n-upload-dragger>
							</n-upload>
						</template>
						你只能上传.PDF文件数据，上传时候你首先把数据处理下，尽可能保留主要字段和前几行信息，以免数据过大xstudio将不会处理！！！
					</n-tooltip>
				</div>
				<br>
				<center>
					<h1 style="font-family: '微软雅黑 Light';font-size:20px;">
						Latex图片识别
						<n-button type="primary" size="small" @click="state.showModal3 = true">
							教程
						</n-button>
					</h1>
				</center>
				<n-divider/>
				<n-upload
					style="border: none;"
					@finish="handleUploadSuccess"
					list-type="image-card"
					:action="state.latexadr">
					<n-upload-dragger style="border-radius: 12px; ">
						<div style="font-size: 40px;position: relative;top:-3px;">
							＋
						</div>
					</n-upload-dragger>
				</n-upload>
				<!--				公告大厅-->
				<br>
				<center>
					<h1 style="font-family: '微软雅黑 Light';font-size:20px;">
						公告
					</h1>
				</center>
				<n-divider/>
				<div style="font-size: 18px;">
					<center>
						1.赛题预处理： 赛题页数10页 【不含表格数据】 字数限制 1.0万字
						<br>
						<br>
						赛题预处理步骤： 原pdf赛题（10多页）→ word复制主要内容 → 另存新pdf赛题（3~5页） → xstudio互动分析
					</center>
					<br>
					<center>
						2.数据上传： 列数 30列内 行数推荐：2~5行 单独数据文件字数1000字内
					</center>
					<br>

					<center>
						3.互动技巧： 梦想版最优 不断引导 迭代总结询问 术语 latex下载docx
					</center>
					<br>

					<center>
						4.注意事项：此软件仅仅加快数学建模分析 辅助 绝不能依赖！ 数学建模需要自己思考！
					</center>
					<br>
					<center>
						<img src="https://ximixiaoyuan-1301452075.cos.ap-nanjing.myqcloud.com/%E5%85%AC%E5%91%8A1.jpg"
								 style="width: 90%;margin-top: 10px;">
						<img src="https://ximixiaoyuan-1301452075.cos.ap-nanjing.myqcloud.com/%E5%85%AC%E5%91%8A2.jpg"
								 style="width: 90%;margin-top: 10px;">
						<img src="https://ximixiaoyuan-1301452075.cos.ap-nanjing.myqcloud.com/%E5%85%AC%E5%91%8A3.jpg"
								 style="width: 90%;margin-top: 10px;">
						<img src="https://ximixiaoyuan-1301452075.cos.ap-nanjing.myqcloud.com/%E5%85%AC%E5%91%8A4.jpg"
								 style="width: 90%;margin-top: 10px;">
						<img src="https://ximixiaoyuan-1301452075.cos.ap-nanjing.myqcloud.com/%E5%85%AC%E5%91%8A5.jpg"
								 style="width: 90%;margin-top: 10px;">
						<img src="https://ximixiaoyuan-1301452075.cos.ap-nanjing.myqcloud.com/%E5%85%AC%E5%91%8A6.jpg"
								 style="width: 90%;margin-top: 10px;">
					</center>
				</div>
			</div>


			<div style="position: sticky; bottom: 0; float: right; background: white; padding: 10px;">
				<n-button type="primary" positive-text="关闭" @click="delgenerl" size="large"
									style="box-shadow: 0 0 10px rgb(53,232,171);margin-right: 20px;">
					<SvgIcon style="font-family: '微软雅黑 Light'" icon="ri-ink-bottle-fill"/>
					&nbsp; &nbsp;清空
				</n-button>
				<br>
				<br>
				<br>
				<n-button
					type="default" positive-text="关闭" @click="state.showModal=false;" size="large"
					style="box-shadow: 0 0 10px rgb(53,232,171);margin-right: 20px;">
					<SvgIcon style="font-family: '微软雅黑 Light'" icon="ri-kakao-talk-line"/>
					&nbsp; &nbsp;闲聊 / 1次
				</n-button>
				<br>
				<br>
				<n-button :disabled="state.maxcontent===0 || state.maxcontent>140000"
									type="default" positive-text="关闭" @click="state.showModal=false" size="large"
									style="box-shadow: 0 0 10px rgb(53,232,171);margin-right: 20px;">
					<SvgIcon style="font-family: '微软雅黑 Light'" icon="ri-kakao-talk-line"/>
					&nbsp; &nbsp;分析 / 1次
				</n-button>
				<br>
				<br>
				<n-button :disabled="state.maxcontent===0 || state.maxcontent>140000"
									type="error" positive-text="关闭" size="large"
									style="box-shadow: 0 0 10px rgb(177,65,31);">
					<SvgIcon style="font-family: '微软雅黑 Light'" icon="ri-quill-pen-fill"/>
					&nbsp; &nbsp;自动 / 10次
				</n-button>
				<br>
				<br>
			</div>


		</n-modal>


		<!--		场景模式-->
		<n-modal
			v-model:show="state.changjingshowModal"
			:mask-closable="true"
			preset="card"
			style="width:50%;border-radius: 5px;"
			content="你确认"
			positive-text="关闭"
		>
			<n-card
				:bordered="false"
				size="huge"
				role="dialog"
				aria-modal="true"
			>

				<!-- Icon -->
				<div align="center" style="display:flex; justify-content:space-around;padding: 0 20%">
					<SvgIcon icon="ri-planet-fill" style="color: #8cc6a1;font-size: 50px;opacity: 0.3" size="20px"/>
					<SvgIcon icon="ri-folder-fill" style="color: #b076c2;font-size: 50px;opacity: 0.3" size="1.5em"/>
					<SvgIcon icon="ri-rocket-fill" style="color: #de2f2f;font-size: 50px;opacity: 0.3" size="1.5em"/>
				</div>

				<!-- Update info -->
				<div style="display:flex; justify-content:space-between; margin:20px 0;">
					<p><strong style="font-family:'等线'">更新者：</strong>UP大大</p>
					<p><strong style="font-family:'等线'">更新时间：</strong>2024年04月05日</p>
				</div>

				<!-- Updated details -->
				<ul style="font-family:'等线;line-height:3">
					<n-badge value="new" type="error">
						<li style="color: #dddddd"><strong>1.</strong> 推理能力提高200%</li>
					</n-badge>
					<br>
					<n-badge value="new" type="error">
						<li style="color: #dddddd"><strong>2.</strong> 赛题页数上线增至40页</li>
					</n-badge>
					<br>

					<n-badge value="new" type="error">
						<li style="color: #dddddd"><strong>4.</strong> 支持图像识别</li>
					</n-badge>
					<br>

					<n-badge value="new" type="error">
						<li style="color: #dddddd"><strong>5.</strong> latex公式识别精度增至98.99%</li>
					</n-badge>
					<br>
					<n-badge value="new" type="success">
						<li style="color: #dddddd"><strong>6.</strong> 团队通信内测</li>
					</n-badge>

				</ul>
				<center>
					<n-button @click="disupgrade();state.changjingshowModal=false"
										size="large" type="success">开 始 叭
					</n-button>
				</center>
			</n-card>
		</n-modal>


		<!--		新手指导-->
		<n-modal
			v-model:show="state.showModal2"
			:mask-closable="false"
			:closable="false"
			preset="dialog"
			style="width: 96%;height:100%"
			title="新手教程"
		>

			<n-card
				:bordered="false"
				size="huge"
				role="dialog"
				aria-modal="true"
			>
				<center>
					<img :src="state.nespic" style="width: 90%;"/>
					<br>
					<n-button :loading="state.newbtnloading" :disabled="state.newbtnstate" type="success" @click="readme">
						{{ state.newbtn }}
					</n-button>
				</center>
			</n-card>
		</n-modal>

	</div>
</template>

<style scoped>
.upload-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}

.gradient-text {
	background: linear-gradient(to right, #42db37, #97ff99);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 48px;
	font-weight: bold;
}

.cards {
	position: relative;
	overflow: hidden; /* Hide the overflowing part of the pseudo-element */
	border: 1px solid #c4c4c4;
	border-radius: 15px;
	margin-bottom: 20px;
	cursor: pointer;
}

.cards:before {
	content: "";
	background: url('http://freesgpt.cn/数模/基因表达差异分析/火山图.png') center / cover no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200px;
	z-index: 888; /* Place it beneath the card's content */
	transform: scale(1);
	transition: transform 0.5s ease;
}

.cards:hover:before {
	transform: scale(1.3); /* Double the size on hover */
}

.cards:hover {
	border-width: 1px;
}

.cards .title {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	padding: 10px;
	background: rgba(255, 255, 255, 0.8);
	color: black;
	transition: color 1s ease;
}


@media (min-width: 992px) {
	.cards {
		width: 30%;
		float: left;
		margin: 1.5%;
	}

	.cards:nth-child(3n) {
		margin-right: 0;
	}
}

@media (max-width: 991px) {
	.cards {
		width: 100%;
	}
}


.container {
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
}

.file-items:hover {
	position: relative;
	left: 3px;
	transition: all 0.5s;
	font-size: 45px;
	color: #037403; /* 悬浮时的字体颜色 */
}

.file-items {
	position: relative;
	left: 3px;
	transition: all 0.8s;
	font-size: 40px;
	color: #4ba750; /* 悬浮时的字体颜色 */
}

.card {
	margin-bottom: 10px;
	border: 1px solid #dbdbdb;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.36);
}


.file-list {
	padding: 20px;
}

.file-item {
	display: flex;
	align-items: center;
	margin-bottom: 10px; /* 设置文件条目之间的间隔 */
	transition: background-color 0.3s, color 0.3s; /* 过渡效果 */
	cursor: pointer; /* 鼠标指针变为手形图标 */
}

.file-item:hover {
	background-color: #ecfff1; /* 悬浮时的背景颜色 */
	color: #09990e; /* 悬浮时的字体颜色 */
}

.file-image {
	width: 50px;
	height: 50px;
	object-fit: cover;
	margin-right: 15px;
	border-radius: 5px;
}

.file-name {
	font-size: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

</style>
